Question

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

2021-09-26

558

javascript arrays object replace

我有 2 个对象数组。我想用 collection2 的匹配对象更新/替换 collection1 的嵌套对象“comments”，其中 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"
    },
    ...
]

我尝试了 map 函数：

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

但我得到了：TypeError：无法读取未定义的属性“_id”。我不确定下一步该怎么做。任何帮助都将不胜感激。

Answer 1

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 2

这可以相对容易地通过递归函数实现，该函数在源上使用 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 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);