Javascript 用更新的对象替换嵌套的对象数组

Question

我有 2 个对象数组。我想 update/replace collection1 的嵌套对象“注释”与 collection2 的匹配对象，其中 collection1.comments._id === collection2.cid 以相同的顺序。

collection1: [
  0:  {
        "_id": "6104844e42c23e6d215651cd",
        "comments": [
            {
                "_id": "6143e24273c10e4658852063",
                "user": "6138b154e4c6a30dc5661da7",
                "comment": "Beautiful Day Outside"
            },
            {
                "_id": "6143e24673c10e4658852065",
                "user": "6138b154e4c6a30dc5661da7",
                "comment": "Let us go for a picnic"
            },
            {
                "_id": "6145d58519a1d70d89512c9c",
                "user": "6144eef7d01acc2a77f4219c",
                "comment": "taking time to smell the flowers"
            }...
        ]
    },
 1:   {
        "_id": "6104842e42c23e6d215651ca",
        "comments": [
            {
                "_id": "61472dab0224a10e11aa45f8",
                "user": "6144eef7d01acc2a77f4219c",
                "comment": "Baking cookies for the party"
            },
            {
                "_id": "61472ecb9c2ece100a525c55",
                "user": "6138b154e4c6a30dc5661da7",
                "comment": "Listening to the waves by the shore"
            }......
        ]
    }
]

collection2: [
  0:  {
        "cid": "6143e24273c10e4658852063",
        "uid": "6138b154e4c6a30dc5661da7",
        "firstName": "mom",
        "lastName": "mom",
        "comment": "Beautiful Day Outsite"
    },
  1:  {
        "cid": "6143e24673c10e4658852065",
        "uid": "6138b154e4c6a30dc5661da7",
        "firstName": "mom",
        "lastName": "mom",
        "comment": "Let us go for a picnic"
    },
  2:  {
        "cid": "61472dab0224a10e11aa45f8",
        "uid": "6144eef7d01acc2a77f4219c",
        "firstName": "james",
        "lastName": "james",
        "comment": "Baking cookies for the party"
    },
  3:  {
        "cid": "61472ecb9c2ece100a525c55",
        "uid": "6138b154e4c6a30dc5661da7",
        "firstName": "james",
        "lastName": "james",
        "comment": "Listening to the waves by the shore"
    },
    ...
]

我试过地图功能：

 collection1.map(obj => collection2.find(o => o.cid === obj.comments._id) || obj);

但我得到：类型错误：无法读取未定义的属性 '_id'。我不确定下一步该怎么做。如有任何帮助，我们将不胜感激。

Answer 1

这可以通过在您的源上使用 Object.entries 的递归函数相对轻松地实现，并尝试将值“并行”分配给您的目标：

function setDataFrom(source, target) {
  for (const [key, val] of Object.entries(source)) {
    if (val !== null && typeof val === `object`) {
      if (target[key] === undefined) {
        target[key] = {};
      }
      setDataFrom(val, target[key]);
    } else {
      target[key] = val;
    }
  }
  return target;
}

这也让您免费获得深拷贝：

function copyFromSource(source) {
  return setDataFrom(source, {});
}

Answer 2

const collection1 = [
  {
        "_id": "6104844e42c23e6d215651cd",
        "comments": [
            {
                "_id": "6143e24273c10e4658852063",
                "user": "6138b154e4c6a30dc5661da7",
                "comment": "Beautiful Day Outside"
            },
            {
                "_id": "6143e24673c10e4658852065",
                "user": "6138b154e4c6a30dc5661da7",
                "comment": "Let us go for a picnic"
            },
            {
                "_id": "6145d58519a1d70d89512c9c",
                "user": "6144eef7d01acc2a77f4219c",
                "comment": "taking time to smell the flowers"
            }
        ]
    },



     {
        "_id": "6104842e42c23e6d215651ca",
        "comments": [
            {
                "_id": "61472dab0224a10e11aa45f8",
                "user": "6144eef7d01acc2a77f4219c",
                "comment": "Baking cookies for the party"
            },
            {
                "_id": "61472ecb9c2ece100a525c55",
                "user": "6138b154e4c6a30dc5661da7",
                "comment": "Listening to the waves by the shore"
            }
        ]
    }
]

const collection2 = [
  {
        "cid": "6143e24273c10e4658852063",
        "uid": "6138b154e4c6a30dc5661da7",
        "firstName": "mom",
        "lastName": "mom",
        "comment": "Beautiful Day Outsite"
    },
  {
        "cid": "6143e24673c10e4658852065",
        "uid": "6138b154e4c6a30dc5661da7",
        "firstName": "mom",
        "lastName": "mom",
        "comment": "Let us go for a picnic"
    },
  {
        "cid": "61472dab0224a10e11aa45f8",
        "uid": "6144eef7d01acc2a77f4219c",
        "firstName": "james",
        "lastName": "james",
        "comment": "Baking cookies for the party"
    },
  {
        "cid": "61472ecb9c2ece100a525c55",
        "uid": "6138b154e4c6a30dc5661da7",
        "firstName": "james",
        "lastName": "james",
        "comment": "Listening to the waves by the shore"
    }
]


const updatedCollection1 = collection1.map(col1 => {
  const updatedComments = col1.comments.map((col1_comment => {
      const matched_comment = collection2.find(el => el.cid === col1_comment._id)
      return matched_comment
  }))
  return {...col1, comments: updatedComments}
})

console.log(updatedCollection1)

Array.prototype.map()方法可以如下：

const updatedCollection1 = collection1.map(col1 => {
       const updatedComments = col1.comments.map((col1_comment => {
           const matched_comment = collection2.find(el => el.cid === col1_comment._id)
           return matched_comment
       }))
       return {...col1, comments: updatedComments}
   })

Answer 3

您可以 map 查看评论并使用 find 检查 id 匹配的位置。

const collection1 = [{
    "_id": "6104844e42c23e6d215651cd",
    "comments": [{
        "_id": "6143e24273c10e4658852063",
        "user": "6138b154e4c6a30dc5661da7",
        "comment": "Beautiful Day Outside"
      },
      {
        "_id": "6143e24673c10e4658852065",
        "user": "6138b154e4c6a30dc5661da7",
        "comment": "Let us go for a picnic"
      },
      {
        "_id": "6145d58519a1d70d89512c9c",
        "user": "6144eef7d01acc2a77f4219c",
        "comment": "taking time to smell the flowers"
      }
    ]
  },
  {
    "_id": "6104842e42c23e6d215651ca",
    "comments": [{
        "_id": "61472dab0224a10e11aa45f8",
        "user": "6144eef7d01acc2a77f4219c",
        "comment": "Baking cookies for the party"
      },
      {
        "_id": "61472ecb9c2ece100a525c55",
        "user": "6138b154e4c6a30dc5661da7",
        "comment": "Listening to the waves by the shore"
      }
    ]
  }
]

const collection2 = [{
    "cid": "6143e24273c10e4658852063",
    "uid": "6138b154e4c6a30dc5661da7",
    "firstName": "mom",
    "lastName": "mom",
    "comment": "Beautiful Day Outsite"
  },
  {
    "cid": "6143e24673c10e4658852065",
    "uid": "6138b154e4c6a30dc5661da7",
    "firstName": "mom",
    "lastName": "mom",
    "comment": "Let us go for a picnic"
  },
  {
    "cid": "61472dab0224a10e11aa45f8",
    "uid": "6144eef7d01acc2a77f4219c",
    "firstName": "james",
    "lastName": "james",
    "comment": "Baking cookies for the party"
  },
  {
    "cid": "61472ecb9c2ece100a525c55",
    "uid": "6138b154e4c6a30dc5661da7",
    "firstName": "james",
    "lastName": "james",
    "comment": "Listening to the waves by the shore"
  },
]

const result = collection1.flatMap((c) => c.comments).map((c) => {
  return {
    commentPart1: c,
    commentPart2: collection2.find((x) => x.cid === c._id)
  }
});

console.log(result);

Javascript 用更新的对象替换嵌套的对象数组

Javascript Replacing nested array of objects with updated object

javascript

arrays

replace

object