Сопоставьте объект JS и объедините параметры в подобъект

Question

У меня проблемы с отображением объекта JS и объединением данных из одного параметра в подобъект другого параметра.

Предположим, у меня есть следующее JSON:

const data = [
  {
    "difficulty": "Easy",
    "levels": [
      {
        "id": 0,
        "title": "Training",
        "description": "First training level."
      },
      {
        "id": 1,
        "title": "Story",
        "description": "First story level."
      }
    ]
  },
  {
    "difficulty": "Medium",
    "levels": [
      {
        "id": 2,
        "title": "Training",
        "description": "First training level at medium difficulty."
      }
    ]
  }
];

И я хочу манипулировать этим, чтобы вернуть:

[
  {
    "id": 0,
    "title": "Training",
    "description": "First training level.",
    "difficulty": "Easy"
  },
  {
    "id": 1,
    "title": "Story",
    "description": "First story level.",
    "difficulty": "Easy"
  },
  {
    "id": 2,
    "title": "Training",
    "description": "First training level at medium difficulty.",
    "difficulty": "Medium"
  }
];

Я пытался:

const result = data.map(item => {
  const { difficulty, levels } = item;
  return levels.map(level => ({ ...level, difficulty }));
});

Но я получаю:

[
   [
      {
         "id": 0,
         "title": "Training",
         "description": "First training level.",
         "difficulty": "Easy"
      },
      {
         "id": 1,
         "title": "Story",
         "description": "First story level.",
         "difficulty": "Easy"
      }
   ],
   [
      {
         "id": 2,
         "title": "Training",
         "description": "First training level at medium difficulty.",
         "difficulty": "Medium"
      }
   ]
]

Я хочу вернуть только levels с добавлением difficulty.

Answer 1

Это происходит потому, что вы используете вложенные функции .map. Каждая функция .map возвращает массив. Чтобы избежать этого, вы можете использовать метод .flat () для уменьшения вложенности. Ваше решение может быть преобразовано в этот

const result = data.map(item => {
      const { difficulty, levels } = item;
      return levels.map(level => ({ ...level, difficulty }));
      }).flat();

По умолчанию оно сжимается для 1 вложенного массива. Более подробную информацию вы можете найти здесь: Array.prototype.flat ()

Но будьте осторожны, используйте это для огромных коллекций данных, потому что он выполняет итерации по массиву, что может снизить производительность.

UPD Вид решения без метода .map

function mapDifficultyToLevels(data) {
  const result = []
  data.forEach(item => {
    item.levels.forEach(level => {
      result.push({
        difficulty: item.difficulty,
        ...level
      })
    })
  })
  return result
}

Answer 2

Используя карту, переберите массив уровней, добавьте свойство сложности и используйте flat (), чтобы удалить вложенные массивы и объединить их в один массив.

const data = [{"difficulty": "Easy", "levels": [{"id": 0,"title": "Training","description": "First training level."},{"id": 1,"title": "Story","description": "First story level."}] },{"difficulty": "Medium","levels": [ {"id": 2, "title": "Training","description": "First training level at medium difficulty."}]}];
let result=data.map( obj =>obj.levels.map(level=>{
level["difficulty"]=obj.difficulty;return level}
)).flat();
console.log(result);

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