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

【问题标题】：Javascript nested arrays grouped by adding new property通过添加新属性分组的 Javascript 嵌套数组
【发布时间】：2021-05-03 04:19:37
【问题描述】：

我正在努力合并两个 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"
  }
]

期待结果数据

[
  {
    "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"
              }
            ]
  }
]

【问题讨论】：

标签： javascript arrays json nested push

【解决方案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);

【讨论】：

【解决方案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)

【讨论】：