如何从嵌套引用中展平我的数据？

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 )