Javascript 嵌套数组通过添加新属性分组

Question

我正在努力合并两个 JSON 数据并创建新的 JSON 数据。我从 Drupal REST-API 获得的数据。我想合并两个后面的 DATA 1 和 DATA 2，引用相同的“tid”创建新的属性“菜单”。 “菜单”项的值将来自 DATA 2 数组。我正在寻找以下结果。

数据 1

[
  {
    "name": "Appetiser",
    "tid": "1",
    "desc": "<p>All starters are served..."
  },
  {
    "name": "Set Menu",
    "tid": "2",
    "desc": "Ipsum dolor sit amet cons..."
  }
]

数据 2

[
  {
    "title": "Garlic Mushroom",
    "menu_item": "Wectetur adipisicing elit....",
    "rate": "1.37",
    "menu_type": "Set Menu",
    "tid": "2"
  },
  {
    "title": "Garlic Bread with Tomato",
    "menu_item": "Nsectetur adipisicing elit....",
    "rate": "3.30",
    "menu_type": "Set Menu",
    "tid": "2"
  },
  {
    "title": "Soup Starter",
    "menu_item": "Osicing xonsectetur ...",
    "rate": "2.00",
    "menu_type": "Appetiser",
    "tid": "1"
  },
  {
    "title": "Pyiaj Starter",
    "menu_item": "Tipisicing xonsectetur...",
    "rate": "1.60",
    "menu_type": "Appetiser",
    "tid": "1"
  }
]

期待结果DATA

[
  {
    "name": "Appetiser",
    "tid": "1",
    "desc": "All starters are served...",
    "menu": [
              {
                "title": "Soup Starter",
                "menu_item": "Osicing xonsectetur ...",
                "rate": "2.00"
              },
              {
                "title": "Pyiaj Starter",
                "menu_item": "Tipisicing xonsectetur...",
                "rate": "1.60"
              }
            ]
  },
  {
    "name": "Set Menu",
    "tid": "2",
    "desc": "Ipsum dolor sit amet cons...",
    "menu" : [
              {
                "title": "Garlic Mushroom",
                "menu_item": "<p>Wectetur adipisicing elit....",
                "rate": "1.37",
                "menu_type": "2 Course Set Menu",
                "tid": "2"
              },
              {
                "title": "Garlic Bread with Tomato",
                "menu_item": "Nsectetur adipisicing elit....",
                "rate": "3.30",
                "menu_type": "2 Course Set Menu",
                "tid": "2"
              }
            ]
  }
]

Answer 1

这应该清楚地解释了如何使用嵌套循环来完成您想要做的事情：

const
  data1 = [
    { "name": "App", "tid": "1", "desc": "All" },
    { "name": "Set", "tid": "2", "desc": "Ipsum" }
  ],
  data2 = [
    { "title": "Garlic M", "item": "Wec", "rate": "1.37", "type": "Set", "tid": "2" },
    { "title": "Garlic B","item": "Nse","rate": "3.30","type": "Set","tid": "2" },
    { "title": "Soup S", "item": "Osi", "rate": "2.00", "type": "App", "tid": "1" },
    { "title": "Pyiaj S", "item": "Tip", "rate": "1.60", "type": "App", "tid": "1" }
  ];

// Copies data1
const result = data1.slice();

//Loops through copy
result.forEach( resultObj => {

  // Adds menu property to each object in copy
  resultObj.menu = [];

  // Loops through data2 for each object in copy to populate its menu array
  data2.forEach(d2Obj => {

    // Only includes those objects from data2 whose `tid` values match
    if(d2Obj.tid == resultObj.tid){

      // Uses destructuring to get local copies of data2's objs' props
      const {title, item, rate} = d2Obj;

      // Makes new obj using these values, and adds it to current menu
      resultObj.menu.push({title, item, rate});
    }
  });
});
console.log(result);

Answer 2

您可以使用 reduce Official Link

来实现

const dataOne = [
  {
    "name": "Appetiser",
    "tid": "1",
    "desc": "<p>All starters are served..."
  },
  {
    "name": "Set Menu",
    "tid": "2",
    "desc": "Ipsum dolor sit amet cons..."
  }
];

const datTwo = [
  {
    "title": "Garlic Mushroom",
    "menu_item": "Wectetur adipisicing elit....",
    "rate": "1.37",
    "menu_type": "Set Menu",
    "tid": "2"
  },
  {
    "title": "Garlic Bread with Tomato",
    "menu_item": "Nsectetur adipisicing elit....",
    "rate": "3.30",
    "menu_type": "Set Menu",
    "tid": "2"
  },
  {
    "title": "Soup Starter",
    "menu_item": "Osicing xonsectetur ...",
    "rate": "2.00",
    "menu_type": "Appetiser",
    "tid": "1"
  },
  {
    "title": "Pyiaj Starter",
    "menu_item": "Tipisicing xonsectetur...",
    "rate": "1.60",
    "menu_type": "Appetiser",
    "tid": "1"
  }
];

const mappedData = datTwo.reduce((acc, cur) => {
  if (acc[cur.tid]) {
    return {
      ...acc,
      [cur.tid]: {
        tid: cur.tid,
        menu: [
          ...acc[cur.tid].menu,
          {
            title: cur.title,
            menu_item: cur.menu_item,
            rate: cur.rate
          }
        ]
      }
    }
  } else {
    return {
      ...acc,
      [cur.tid]: {
        tid: cur.tid,
        menu: [
          {
            title: cur.title,
            menu_item: cur.menu_item,
            rate: cur.rate
          }
        ]
      }

    }
  }

}, {})

const finalData = dataOne.map((data) => {
  const hasData = Object.values(mappedData).reduce((acc, cur) => {
    if (cur.tid === data.tid) {
      return {
        name: data.name,
        tid: data.tid,
        description: data.desc,
        menu: cur.menu
      }
    } else {
      return acc
    }
  }, {})

  return hasData;

})

console.log('finalData', finalData)

Javascript 嵌套数组通过添加新属性分组

Javascript nested arrays grouped by adding new property

javascript

arrays

json

nested

push

Javascript 嵌套数组通过添加新 属性 分组

Javascript nested arrays grouped by adding new property

javascript

arrays

json

nested

push

Javascript 嵌套数组通过添加新属性分组