javascript отображает два вложенных массива и изменяет существующие путем поиска

Question

У меня есть kids объект, который выглядит следующим образом:

const kids = {
    name: 'john',
    extra: {
        city: 'London',
        hobbies: [
            {
                id: 'football',
                team: 'ABC',
            },
            {
                id: 'basketball',
                team: 'DEF',
            },
        ],
    },
};

, и у меня есть следующий объект, который содержит все виды спорта и дополнительную информацию для каждого.

const sports = [
    {
        name: 'volleyball',
        coach: 'tom',
    },
    {
        name: 'waterpolo',
        coach: 'jack',
    },
    {
        name: 'swimming',
        coach: 'kate',
    },
    {
        name: 'football',
        coach: 'sara',
    },
];

Я хочу получить список всех id s в массиве хобби и просмотреть все спортивные элементы в массиве sports, найти и добавить дополнительное поле к этому объекту available и присвоить значение trueтак что результат будет выглядеть так:

const result = [
    {
        name: 'volleyball',
        coach: 'tom',
    },
    {
        name: 'waterpolo',
        coach: 'jack',
    },
    {
        name: 'swimming',
        coach: 'kate',
    },
    {
        name: 'football',
        coach: 'sara',
        available: true
    },
];

кстати, вот моя попытка:

const result = kids.extra.hobbies.map(a => a.id);
for (var key in sports) {
    console.log(sports[key].name);
    const foundIndex = result.indexOf(sports[key].name);
    if ( foundIndex > -1) {
      sports[key].available = true;
    }
}
console.log(sports)

но это слишком долго ... я ищу один код, выглядящий как лайнери надежная логика.

Answer 1

Сначала создайте массив найденных видов спорта, затем map, проверяя, есть ли в нем имя спортивного объекта:

const kids = {name:'john',extra:{city:'London',hobbies:[{id:'football',team:'ABC',},{id:'basketball',team:'DEF',},],},}
const sports = [{name:'volleyball',coach:'tom',},{name:'waterpolo',coach:'jack',},{name:'swimming',coach:'kate',},{name:'football',coach:'sara',},];
const sportsInHobbies = kids.extra.hobbies.map(({ id }) => id);
const result = sports.map((sportObj) => {
  const available = sportsInHobbies.includes(sportObj.name);
  return available ? {...sportObj, available } : { ...sportObj };
});
console.log(result);

Answer 2

Во-первых, я бы изменил свои структуры данных на объекты. Каждый раз, когда у вас есть список вещей с уникальными идентификаторами, объекты сделают вашу жизнь намного проще, чем массивы. Имея это в виду, если вы должны использовать массивы, вы можете сделать следующее:

const hobbies = kids.extra.hobbies
sports.forEach(s => s.available = hobbies.some(h => h.id === s.name))

Обратите внимание, что это мутирует оригинальный спортивный объект (смените на карту для нового), а также добавляет false/true вместо просто true.

Answer 3

Это можно сделать разными способами;однако было бы легко разделить проблему на два этапа:

Сначала мы можем сгладить увлечения ребенка в массив, используя функцию Array.map():

const hobbies = kids.extra.hobbies.map(hobby => hobby.id);

Затем мыможет выполнять итерацию по массиву sports и добавлять свойство active к любому объекту, присутствующему в новом массиве hobbies:

const result = sports.map(sport => {
  if (hobbies.indexOf(sport.name) !== -1) {
    sport.available = true;
  }

  return sport;
})

---

Полное решение

const kids = {
  name: 'john',
  extra: {
    city: 'London',
    hobbies: [{
        id: 'football',
        team: 'ABC',
      },
      {
        id: 'basketball',
        team: 'DEF',
      },
    ],
  },
};

const sports = [{
    name: 'volleyball',
    coach: 'tom',
  },
  {
    name: 'waterpolo',
    coach: 'jack',
  },
  {
    name: 'swimming',
    coach: 'kate',
  },
  {
    name: 'football',
    coach: 'sara',
  },
];

const hobbies = kids.extra.hobbies.map(hobby => hobby.id);


const result = sports.map(sport => {
  if (hobbies.indexOf(sport.name) !== -1) {
    sport.available = true;
  }

  return sport;
})

console.log(result);