javascript - объединить, объединить, преобразовать 2 различных массива объектов

Question

Я не могу понять, как преобразовать и объединить 2 массива объектов.

У меня есть 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}
]

courseType Свойство внутри первого JSON представляет собой массив чисел, который соответствует courseTypes index и свойству id во втором JSON.

Результат для этого случая должен быть следующим:

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",
      }
    ]
  }
]

Ожидаемый результат должен объединить 2 массива путем фильтрации по свойству courseType .

Answer 1

Предполагая, что вы хотите, чтобы все предметы с selectedCourse, вы могли бы взять Map и собрать все курсы, а затем отбросить новый массив из найденных значений.

Это решение включает Рыбу.

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" }],
    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 }],
    map = selectedCourse.reduce((m, o) => o.courseType.reduce((n, id) => n.set(id, [...(n.get(id) || []), o]), m), new Map),
    result = courseTypes.reduce(
        (r, { name: courseName, id: courseType }) => (map.get(courseType) || []).reduce((s, courses) => s.concat({ courseType, courseName, courses }), r),
        []
    );
   
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

, хотя код "trincot" хорошо работает для Chrome и Mozila, но он не будет работать в IE edge и IE 10 и ниже, вам необходимо преобразовать его в чистый javascript.ниже приведен код, который будет работать во всех браузерах.

if (!Array.prototype.includes) {
   Object.defineProperty(Array.prototype, 'includes', {
   value: function(searchElement, fromIndex) {

  if (this == null) {
    throw new TypeError('"this" is null or not defined');
  }

  // 1. Let O be ? ToObject(this value).
  var o = Object(this);

  // 2. Let len be ? ToLength(? Get(O, "length")).
  var len = o.length >>> 0;

  // 3. If len is 0, return false.
  if (len === 0) {
    return false;
  }

  // 4. Let n be ? ToInteger(fromIndex).
  //    (If fromIndex is undefined, this step produces the value 0.)
  var n = fromIndex | 0;

  // 5. If n ≥ 0, then
  //  a. Let k be n.
  // 6. Else n < 0,
  //  a. Let k be len + n.
  //  b. If k < 0, let k be 0.
  var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

  function sameValueZero(x, y) {
    return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
  }

  // 7. Repeat, while k < len
  while (k < len) {
    // a. Let elementK be the result of ? Get(O, ! ToString(k)).
    // b. If SameValueZero(searchElement, elementK) is true, return true.
    if (sameValueZero(o[k], searchElement)) {
      return true;
    }
    // c. Increase k by 1. 
    k++;
  }

  // 8. Return false
  return false;
    }
  });
}
var 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" }];
var 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 }];
var result = courseTypes.map(function (courseType) {
return {
    courseType: courseType.id,
    courseName: courseType.name,
    courses: selectedCourse.filter(function (course) {
        return course.courseType.includes(courseType.id);
    })
  };
}).filter(function (extended) {
   return extended.courses.length;
});

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

Answer 3

Вы можете использовать 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, какие курсы соответствуют этому конкретному типу.

Он использует .filter для сбора этих совпадений.Обратный вызов filter использует includes для определения совпадения - он возвращает логическое значение, именно то, что обратный вызов фильтра ожидает в качестве возвращаемого значения.

Этот фильтрованный массив затем добавляется к литералу объекта, которыйтакже определяет два других свойства courseType и courseName.Этот новый объект - то, на что отображается тип курса.courseTypes.map возвращает массив этих объектов.

Наконец, в результате могут быть записи с пустым массивом courses.Те отфильтрованы с другим вызовом .filter.Если length этого массива courses не равен нулю, объект сохраняется, в противном случае он исключается из результата.

Для более старых браузеров

Вот такой же кодсовместим со старыми браузерами (без функций стрелок, без includes, которые были представлены в 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));