使用对象数组更新数组中的数组对象

Question

我有两个javaScript数组

let x = [
    {
        id: 'Abc',
        children: [
            {
                id: 12,
                name: 'john'
            }, {
                id: 13,
                name: 'dow'
            }
        ]
    }, {
        id: 'xyz',
        children: [
            {
                id: 123,
                name: 'jack'
            }, {
                id: 134,
                name: 'abc'
            }
        ]
    }
]
let y = [
    {
        id: 12,
        name: 'mac'
    }, {
        id: 13,
        name: 'dow'
    }, {
        id: 123,
        name: 'Tom'
    }, {
        id: 134,
        name: 'abc'
    }
]

我想用 y 更新我的 x 并像这样更新数组

[
    {
        id: 'Abc',
        children: [
            {
                id: 12,
                name: 'mac'
            }, {
                id: 13,
                name: 'dow'
            }
        ]
    }, {
        id: 'xyz',
        children: [
            {
                id: 123,
                name: 'Tom'
            }, {
                id: 134,
                name: 'abc'
            }
        ]
    }
]

我这样试过

x.map((a, index)=>{
    a.children.map((b, i)=>{
        // console.log('update')
        y.find(o => o.id === b.id) || b;
    })
})

但我有 undefined。我搜索了很多答案，但没有得到任何运气。

Answer 1

首先对y进行循环object，然后对x

使用map对children

let x = [
  {
    id: "Abc",
    children: [
      {
        id: 12,
        name: "john",
      },
      {
        id: 13,
        name: "dow",
      },
    ],
  },
  {
    id: "xyz",
    children: [
      {
        id: 123,
        name: "jack",
      },
      {
        id: 134,
        name: "abc",
      },
    ],
  },
];
let y = [
  {
    id: 12,
    name: "mac",
  },
  {
    id: 13,
    name: "dow",
  },
  {
    id: 123,
    name: "Tom",
  },
  {
    id: 134,
    name: "abc",
  },
];

const lookupY = {};
y.forEach(({ id, name }) => (lookupY[id] = name));

const newX = x.map(({ id, children }) => ({
  id,
  children: children.map((item) => ({ id:item.id, name: lookupY[item.id] })),
}));

console.log(newX)

Answer 2

x.map((a, index)=>{
    a.children.map((b, i)=>{
        // console.log('update')
        y.find(o => o.id === b.id) || b;
    })
})

首先，您在使用数组函数时犯了一个常见错误：括号{}对于单行指令是可选的，但是之后需要指定return关键字。

arr.filter(v => v === 2) 等同于 arr.filter(v => {return v === 2})。忘记 return，filter() 将 return 一个空数组。

在线解决方案：

const res = x.map((a, index) => ({ ...a, children: a.children.map((b, i) => y.find(o => o.id === b.id) || b) }));

代码片段：

let x = [
    {
        id: 'Abc',
        children: [
            {
                id: 12,
                name: 'john'
            }, {
                id: 13,
                name: 'dow'
            }
        ]
    }, {
        id: 'xyz',
        children: [
            {
                id: 123,
                name: 'jack'
            }, {
                id: 134,
                name: 'abc'
            }
        ]
    }
]
let y = [
    {
        id: 12,
        name: 'mac'
    }, {
        id: 13,
        name: 'dow'
    }, {
        id: 123,
        name: 'Tom'
    }, {
        id: 134,
        name: 'abc'
    }
]

const res = x.map((a, index) => 
  ({ ...a, children: a.children.map((b, i) => y.find(o => o.id === b.id) || b) }));

console.log(res);

Answer 3

首先你忘记了return回调函数中的结果。那么你不应该丢失对象的其他键。

const x = [
  {
    id: 'Abc',
    children: [
      {
        id: 12,
        name: 'john'
      }, {
        id: 13,
        name: 'dow'
      }
    ]
  }, {
    id: 'xyz',
    children: [
      {
        id: 123,
        name: 'jack'
      }, {
        id: 134,
        name: 'abc'
      }
    ]
  }
];
const y = [
  {
    id: 12,
    name: 'mac'
  }, {
    id: 13,
    name: 'dow'
  }, {
    id: 123,
    name: 'Tom'
  }, {
    id: 134,
    name: 'abc'
  }
];

const newArr = x.map((a, index) => {
  const children = a.children.map((b, i) => {
    return y.find(o => o.id === b.id) || b;
  })
  return { ...a, children };
})

console.log(newArr);

使用对象数组更新数组中的数组对象

Updating objects of array in array with array of Object

javascript

arrays

json

jsobject

es6-modules