JavaScript对象的格式化，在产品下显示子产品答案

【问题标题】：Formatting of JavaScript Objects, Showing Sub Products under ProductsJavaScript对象的格式化，在产品下显示子产品
【发布时间】：2019-08-22 18:59:37
【问题描述】：

我有一个产品对象数组，我想显示在其父对象下具有父 ID 且属性名为 subproduct 的对象

我有一个像

这样的数组对象

let products = [{
        "id": 30,
        "service_provider_id": 4,
        "parent_id": null,
        "status_id": 1,
        "code": "1450",
        "name": "Paypal"
    },
    {
        "id": 31,
        "service_provider_id": 4,
        "parent_id": 30,
        "status_id": 1,
        "code": "1451",
        "name": "Payments"
    }
]

我想按如下方式格式化

"products": [{
    "id": 30,
    "service_provider_id": 4,
    "parent_id": null,
    "status_id": 1,
    "code": "14",
    "name": "Paypal"
    "sub-products": [{
        "id": 31,
        "service_provider_id": 4,
        "parent_id": 30,
        "status_id": 1,
        "code": "15",
        "name": "Paypal-Payments"
    }]
}]

【问题讨论】：

@radarbob 格式化了，你有答案吗？

标签： javascript ecmascript-6 javascript-objects

【解决方案1】：

这会起作用

let products =  [
  {
      "id": 30,
      "service_provider_id": 4,
      "parent_id": null,
      "status_id": 1,
      "code": "1450",
      "name": "Paypal"
  },
  {
      "id": 31,
      "service_provider_id": 4,
      "parent_id": 30,
      "status_id": 1,
      "code": "1451",
      "name": "Payments"
  }
]

let formated = [];

formated = products.filter(product => product.parent_id == null);

formated.forEach(formatedproduct=>{
  products.forEach(product =>{
      if(product.parent_id == formatedproduct.id){
        if(!formatedproduct.sub_products )
        {
        formatedproduct.sub_products = [];
        }
        product.name = formatedproduct.name +' '+product.name;
        formatedproduct.sub_products.push(product);
        
        
      }
  });
})

console.log(formated);

【讨论】：

谢谢，请在子产品分配下方添加此行，我会接受您的回答 formatedproduct.sub_products[0].name = formatedproduct.name + ' ' +product.name;
看看我做了一些改变
这里假设产品不超过两个级别。

【解决方案2】：

你可以使用map和reduce的组合

const grouped = [
    ...products
        .sort((a, b) => a.parent_id - b.parent_id)
        .reduce((a, b) => a.set(b.parent_id || b.id, (a.get(b.parent_id) || []).concat(b)), new Map())
        .values()
]
    .map(([f, ...rest]) => (f.sub_products = rest, f));

console.log(grouped);

<script>
  const products = [{
      'id': 30,
      'service_provider_id': 4,
      'parent_id': null,
      'status_id': 1,
      'code': '1450',
      'name': 'Paypal'
    },
    {
      'id': 31,
      'service_provider_id': 4,
      'parent_id': 30,
      'status_id': 1,
      'code': '1451',
      'name': 'Payments'
    },
    {
      'id': 32,
      'service_provider_id': 4,
      'parent_id': null,
      'status_id': 1,
      'code': '1450',
      'name': 'Paypal'
    },
    {
      'id': 33,
      'service_provider_id': 4,
      'parent_id': 32,
      'status_id': 1,
      'code': '1451',
      'name': 'Payments'
    }
  ];
</script>

【讨论】：