Как сгладить мои данные из вложенных ссылок?

Question

Привет, ребята, мне нужна помощь для структурирования некоторых данных, но мне нужно несколько идей, чтобы сделать это как можно более быстрым. Я терял голову из-за рекурсий и множественных петель. Я упростила данные, чтобы понять концепцию и решить ее самостоятельно с вашим пониманием. У меня есть:

const data = [
{
   id: 'W1', 
   color: red,
   personId: 'P77',
},
{
   id: 'W7', 
   color: yellow,
   personId: 'P21',
},
]

const persons = [
{
   id: 'P77',
   name: 'Peter',
   favoriteFoodId: 'FF4',
},
{
   id: 'P21',
   name: 'John',
   favoriteFood: 'FF9',
}
];

const favoriteFood = [
{
   id: 'FF9'
   food: 'pasta'
  description: 'fresh italian pasta from stone oven'
},
{
   id: 'FF4'
   food: 'banana'
  description: 'fresh bananas from the tree'
}
]

Как объединить данные, которые будут сведены со всеми ссылками? Как мне сделать это достаточно универсальным, чтобы справиться с глубоким вложением, чтобы сгладить его и подобрать ссылки? Я попробовал это, но я просто слишком много зацикливался, чтобы это больше не выглядело нормальным.

Я хотел бы получить такой результат:

const result  = [
{
   id: 'W1', 
   color: red,
   name: 'Peter',
  food: 'banana'
  description: 'fresh bananas from the tree'
},
{
   id: 'W7', 
   color: yellow,
   name: 'Peter',
    food: 'pasta'
   description: 'fresh italian pasta from stone oven'
},
]

И result будетбыть передан в мой компонент таблицы, который будет отображать каждый объект в виде строки

Answer 1

Рассматривали ли вы словари?

const data = 
{
   'W1':{ color: "red" ,  personId: 'P77' }
   ,'W7':{ color: "yellow", personId: 'P21'},
}

const persons =
{
  'P77':{ name: 'Peter', favoriteFoodId: 'FF4' },
   'P21':{ name: 'John', favoriteFoodId: 'FF9' } 
}

const favoriteFoods = 
{
   'FF9':{ food: 'pasta', description: 'fresh italian pasta from stone oven' }
  ,'FF4':{ food: 'banana', description: 'fresh bananas from the tree' }
}

function getFavFood( pId , field ){
  return favoriteFoods[ persons[ data[pId].personId ].favoriteFoodId ][field]
}

// not sure what template library you'll be using
// but for now plain old js....

table = "<TABLE>"

for( d in data){
  table += `<TR style="background:${data[d].color}">`
  + `<TD>${ persons[ data[d].personId ].name }</TD>`
  + `<TD>${ getFavFood( d , "food" ) }</TD>`
  + `<TD>${ getFavFood( d , "description" ) }</TD>`
  +`</TR>` 
}

table += "</TABLE>"

document.body.insertAdjacentHTML( "beforeend" , table )