如何通过两个数组在JS上构建动态对象 [英] How to Build a Dynamic object on JS From two arrays

问题描述

我正在尝试从另外两个数组构建对象数组，有人可以帮帮我吗.

I'm trying to build an array of objects from another two arrays, can someone help me out.

const parent =[
  { Id: 1, Cate: 'Accommodation', p_id: null },
  { Id: 4, Cate: 'National Travel', p_id: null }
]

const child =[
  { Id: 2, Cate: 'Hotel Accommodation', p_id: 1 },
  { Id: 3, Cate: 'Own arrangement', p_id: 1 },
  { Id: 5, Cate: 'Air', p_id: 4 },
  { Id: 6, Cate: 'Bus', p_id: 4 },
  { Id: 7, Cate: 'AC Volvo', p_id: 6 },
  { Id: 8, Cate: 'Luxury Bus', p_id: 6 },
  { Id: 9, Cate: 'Bus', p_id: 6 }
]

const data = [
  {
    id: 1,
    tittle: 'Accommodation',
    subItem: [
      { id: 2, tittle: 'Hotel Accommodation', subItems: [] },
      { id: 3, tittle: 'Own arrangement', subItems: [] },
    ],
  },
  {
    id: 4,
    tittle: 'National Travel',
    subItem: [
      { id: 5, tittle: 'Air', subItems: [] },
      {
        id: 6,
        tittle: 'Bus',
        subItem: [
          { id: 7, tittle: 'AC Volvo' },
          { id: 5, tittle: 'Air' },
          { id: 8, tittle: 'Luxury Bus' },
          { id: 9, tittle: 'Bus' },
        ],
      },
    ],
  },
];

parent 和 child 是我从数据库中获得的数据，现在我需要将其更改为类似于 data 的内容.问题是它必须是动态的，因为 subItems 可以持续很长时间，我该怎么做?

parent and child are the data I get from DB, now I need to change that into something looking like data. The thing is it has to be dynamic, as subItems can go long as it needs to be, how can I make something like that?

推荐答案

您可以维护两个对象，一个父对象和一个可见对象.看到的对象负责存储所有已经看到的对象ID.这意味着，对于数组中的每个对象，都将其添加到可见的对象中.

You can maintain two objects, a parent object, and a seen object. The seen object is responsible for storing all object ids already seen. That means, for each object in your array, you add it to the seen object.

// Seen object
{
  id_1: {id: id_1, ...}, /* id: 1 */
  id_2: {id: id_2, ...}, /* id: 2 */
  id_3: {id: id_3, ...}, /* id: 3 */
  id_4: {id: id_3, ...}  /* id: 4 */
}

当父对象先被子对象使用之前，您可以说，当 p_id 未出现在 seen 对象中时，当前对象是父对象，因此，您可以将其 id 添加到 parents 对象中(在上面的示例中，假定 id_1 是父对象).请记住，此对象也会添加到 seen 中，因此，我们可以在 seen 中的父对象和 parents 中的父对象之间创建链接.code>通过使用其引用:

As your parent objects come before they are used by your child objects, you can say that, when the p_id does not appear in the seen object, then the current object is a parent, and so, you can add its id to the parents object (in the above example, assume id_1 is a parent). Keep in mind that this object also gets added to seen, and so, we can create a link between the parent object in seen and the one in parents by using its reference:

// Parents object
{
  id_1: /* ref: 1 */ <-- this refers to the seen[id_1] object
}

然后，该链接允许我们更改 seen 中的对象，这将导致 parents 中的对象发生更改.

This link then allows us to change the object in seen, which would then result in the object in parents changing.

当一个对象不是父对象时，它必须是我们已经已见的另一个对象的子对象.在此示例中，假定具有 id_2 的对象是 id_1 的子项/子项.我们首先可以使用 seen [p_id] 在 seen 对象中查找id_2的父对象(即具有 id_1 的对象).一旦有了id_2的父对象，就可以在其中添加 subItem 数组，并在该数组中添加对id_2对象的引用:

When an object is not a parent object, then it must be a child of another object we have already seen. In this example, assume that the object with id_2 is a child/subItem of id_1. We can first find id_2's parent object (ie: the object with id_1) by looking it up in the seen object using seen[p_id]. Once we have the parent object for id_2, we can add a subItem array to it if needed, and add a reference to our id_2 object to this array:

// Seen object
{
  id_1: {id: id_1, ..., subItem: [/* ref: 2 */]}, /* id: 1 */
  id_2: {id: id_2, ...}, /* id: 2 */
}

通过使用 .push(seen [Id])推入添加到 seen 的对象，我们添加id_2作为参考.我们将添加一个引用，因为这意味着如果我们更改存储在可见对象中id_2的对象，则其更改将反映在id_1的subItem数组中.

we add id_2 as a reference by pushing in the object we added to seen by using .push(seen[Id]). We're adding a reference, as this will mean that if we change the object stored at id_2 in our seen object, then its changes will be reflected in id_1's subItem array.

一旦我们遍历了数组中的所有对象，我们就可以获取 parents 对象的值，该对象包含对 seen 中的对象以及这些对象的引用本身(可能)还包含对 seen 中其他对象的引用.这给了我们最终结果:

Once we have iterated over all objects in our array, we can grab the values of our parents object, which contains references to the objects in seen, and those objects themselves also (may) contain references to other objects in seen. This gives us our final result:

const parent =[ { Id: 1, Cate: 'Accommodation', p_id: null }, { Id: 4, Cate: 'National Travel', p_id: null } ];
const child = [ { Id: 2, Cate: 'Hotel Accommodation', p_id: 1 }, { Id: 3, Cate: 'Own arrangement', p_id: 1 }, { Id: 5, Cate: 'Air', p_id: 4 }, { Id: 6, Cate: 'Bus', p_id: 4 }, { Id: 7, Cate: 'AC Volvo', p_id: 6 }, { Id: 8, Cate: 'Luxury Bus', p_id: 6 }, { Id: 9, Cate: 'Bus', p_id: 6 } ];

const buildChildren = arr => {
  const parents = {}, seen = {};
  for(const {Id, Cate, p_id} of arr) {
    seen[Id] = {id: Id, title: Cate};
    if(p_id in seen) {
      const myParent = seen[p_id];
      myParent.subItem = myParent.subItem || []; // add subItem property if it doesn't exist yet
      myParent.subItem.push(seen[Id]); 
    } else { // Adding a new parent
      parents[Id] = seen[Id];
    }
    
  }
  return Object.values(parents);
}

console.log(buildChildren([...parent, ...child]));

这篇关于如何通过两个数组在JS上构建动态对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！