javascript-合并，合并，转换2个不同的对象数组 [英] javascript - merge, combine, transform 2 different arrays of Objects

问题描述

我不知道如何转换和组合2个对象数组.

I can't figure it out how to transform and combine 2 arrays of object.

我有这2个对象数组:

const selectedCourse = [
    {
      "courseType": [5],
      "id": 26,
      "title": "Apple Tart with Apricot Glaze",
  },
  {
    "courseType": [3],
    "id": 16,
    "title": "Classic Caesar Salad",
},
{
  "courseType": [1,2],
  "id": 10,
  "title": "Lobster Bisque",
},
{
  "courseType": [3],
  "id": 16,
  "title": "Classic Caesar Salad",
},
]

const courseTypes = [
{name: "Hors d'oeuvres", id: 0},
 {name: "Soup", id: 1},
 {name: "Fish", id: 2},
 {name: "Salad", id: 3},
 {name: "Main course", id: 4},
 {name: "Dessert", id: 5}
]

第一个JSON中的 courseType 属性是一个数字数组，它对应于第二个JSON中的 courseTypes 索引和属性 id .

The courseType property inside the first JSON is an array of numbers that corresponds to courseTypes index and property id in the second JSON.

这种情况下的结果应为:

The result for this case should be this:

const result = [
  {
    courseType: 1,
    courseName: "Soup",
    courses: [
      {
        "courseType": [1,2],
        "id": 10,
        "title": "Lobster Bisque",
      }      
    ]
  },
  {
    courseType: 3,
    courseName: "Salad",
    courses: [
      {
        "courseType": [1,2],
        "id": 10,
        "title": "Lobster Bisque",
      }      
    ]
  },
  {
    courseType: 3,
    courseName: "Fish",
    courses: [
      {
        "courseType": [3],
        "id": 16,
        "title": "Classic Caesar Salad",
      },
      {
        "courseType": [3],
        "id": 16,
      },      
    ]
  },
  {
    courseType: 5,
    courseName: "Main course",
    courses: [
      {
        "courseType": [5],
        "id": 26,
        "title": "Apple Tart with Apricot Glaze",
      }
    ]
  }
]

预期结果必须通过 courseType 属性进行过滤，从而将2个数组组合在一起.

The expected result have to combine the 2 arrays by filtering by courseType property.

推荐答案

您可以像这样使用map和filter:

const selectedCourse = [ { "courseType": [5], "id": 26, "title": "Apple Tart with Apricot Glaze", }, { "courseType": [3], "id": 16, "title": "Classic Caesar Salad", }, { "courseType": [1,2], "id": 10, "title": "Lobster Bisque", }, { "courseType": [3], "id": 16, "title": "Classic Caesar Salad", }, ]

const courseTypes = [ {name: "Hors d'oeuvres", id: 0}, {name: "Soup", id: 1}, {name: "Fish", id: 2}, {name: "Salad", id: 3}, {name: "Main course", id: 4}, {name: "Dessert", id: 5} ];

const result = courseTypes.map(courseType => ({
    courseType: courseType.id, 
    courseName: courseType.name,
    courses: selectedCourse.filter(course => course.courseType.includes(courseType.id))
})).filter(extended => extended.courses.length);

console.log(JSON.stringify(result, null, 2));

courseTypes.map遍历第二个输入数组，并为selectedCourse中的每种类型找到与该特定类型匹配的课程.

courseTypes.map iterates over your second input array and for each type it finds in selectedCourse which courses match with that particular type.

它使用.filter来收集那些匹配项. filter回调使用includes来确定是否匹配-它返回一个布尔值，该布尔值恰好是过滤器回调期望的返回值.

It uses .filter to collect those matches. The filter callback uses includes to determine if there is a match -- it returns a boolean, exactly what the filter callback expects as return value.

然后将这个过滤后的数组添加到对象常量中，该对象常量还定义了其他两个属性courseType和courseName.该新对象就是课程类型所映射的对象. courseTypes.map返回这些对象的数组.

This filtered array is then added to an object literal that also defines the other two properties courseType and courseName. That new object is what the course type is mapped to. courseTypes.map returns an array of those objects.

最后，该结果可能包含具有空courses数组的条目.这些将被另一个.filter调用过滤掉.如果该courses数组的length不为零，则保留该对象，否则将其踢出结果.

Finally that result may have entries that have an empty courses array. Those are filtered out with another call to .filter. If the length of that courses array is non zero, the object is kept, otherwise it is kicked out of the result.

以下是与旧版浏览器兼容的代码(没有箭头功能，没有includes，这是ES2015中引入的):

Here is the same code made compatible with older browsers (no arrow functions, no includes, which were introduced in ES2015):

const selectedCourse = [ { "courseType": [5], "id": 26, "title": "Apple Tart with Apricot Glaze", }, { "courseType": [3], "id": 16, "title": "Classic Caesar Salad", }, { "courseType": [1,2], "id": 10, "title": "Lobster Bisque", }, { "courseType": [3], "id": 16, "title": "Classic Caesar Salad", }, ]

const courseTypes = [ {name: "Hors d'oeuvres", id: 0}, {name: "Soup", id: 1}, {name: "Fish", id: 2}, {name: "Salad", id: 3}, {name: "Main course", id: 4}, {name: "Dessert", id: 5} ];

const result = courseTypes.map(function (courseType) {
    return {
        courseType: courseType.id, 
        courseName: courseType.name,
        courses: selectedCourse.filter(function (course) {
            return course.courseType.indexOf(courseType.id) > -1;
        })
    };
}).filter(function (extended) {
    return extended.courses.length;
});

console.log(JSON.stringify(result, null, 2));

这篇关于javascript-合并，合并，转换2个不同的对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！