【问题标题】:Loop through each object in a array of arrays find the id, match it to another object in an array and concatenate them together遍历数组数组中的每个对象找到 id,将其与数组中的另一个对象匹配并将它们连接在一起
【发布时间】:2020-04-27 13:54:47
【问题描述】:

所以我有一个名为“products”的数组,其中包含对象,每个对象都有一个唯一的 ID。我还有另一个名为“productsAdditionalInfo”的数组,其中包含与“products”相关的附加信息,并且每个对象都有一个与“products”数组中的一个对象匹配的 owner_id。 'productsAdditionalInfo' 可能在一个数组中包含许多对象,但相对于该数组,它始终具有相同的 owner_id。

我正在尝试遍历“productsAdditionalInfo”数组,获取“owner_id”并将其与 products 数组中的“id”匹配,然后将命名空间添加为键,将值添加为值,然后将其作为新的返回大批。但是,看来我被困在第一个障碍上。我在控制台中得到“持续时间”的第一个键,然后得到未定义的“命名空间”。

我希望这是有道理的,如果不是我已经注释掉了一个应该如何的例子。我很感激任何帮助。

编辑:有些人建议这与another question 相似/相同,您将它们合并在一起,但我相信我的问题是不同的,因为我并没有将它们完全合并在一起只是某些信息。

let products = [ {id: 102, type: "toy"}, {id: 245, type: "food"}, {id: 312, type: "clothes"} ]

let productsAdditionalInfo = [ 
  [{namespace: "Duration", value: 5, owner_id: 245}, {namespace: "effect", value: "Tail", owner_id: 245}], 
  [{namespace: "Supplier", owner_id: 312, value: "rev"}], 
  [{namespace: "amount", value: 0, owner_id: 102}, {namespace: "effect", value: "plush", owner_id: 102}] 
]

$.each(productsAdditionalInfo, function( index, product ) {
  console.log( product[index].namespace );
});


// let whatItShouldBe = [ {id: 102, type: "toy", amount: 0, effect: "plush" }, {id: 245, type: "food", Duration: 5, effect: "Tail"}, {id: 312,  type: "clothes", Supplier: "rev"} ]
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【问题讨论】:

  • product[index] 在 each 循环中是错误的 - product 在这一点上已经是 productsAdditionalInfo 的元素之一; index 是其中的索引。每个product 本身又是一个对象的array,所以此时您可能需要第二个嵌套循环。
  • 不幸的是,我没有完全合并它们,我只想合并“命名空间”和“值”

标签: javascript jquery ecmascript-5


【解决方案1】:

实现此目的的一种方法是遍历每个产品,根据owner_id 检索关联的productAdditionsInfo。从那里您可以从添加创建一个对象并将两者合并在一起,如下所示:

let products = [{id: 102, type: "toy"}, {id: 245, type: "food"}, {id: 312, type: "clothes"}]
let productsAdditionalInfo = [ 
  [{namespace: "Duration", value: 5, owner_id: 245}, {namespace: "effect", value: "Tail", owner_id: 245}], 
  [{namespace: "Supplier", owner_id: 312, value: "rev"}], 
  [{namespace: "amount", value: 0, owner_id: 102}, {namespace: "effect", value: "plush", owner_id: 102}] 
]

let merged = products.map(p => {
  var info = productsAdditionalInfo.filter(i => i[0].owner_id == p.id)[0].map(i => ({ [i.namespace]: i.value }));
  info.push(p);
  return Object.assign(...info);
});

console.log(merged);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这是假设productsAdditionalInfo 中的二级数组总是由相同的owner_id 分组。

【讨论】:

  • 非常感谢!它甚至应该在 IE 中工作,这是一个不错的奖励,但不是必需的。
  • 如果你想使用jQuery支持IE,你可以使用.apply$.extend$.map$.grep
【解决方案2】:

let products = [ {id: 102, type: "toy"}, {id: 245, type: "food"}, {id: 312, type: "clothes"} ]

let productsAdditionalInfo = [ 
  [{namespace: "Duration", value: 5, owner_id: 245}, {namespace: "effect", value: "Tail", owner_id: 245}], 
  [{namespace: "Supplier", owner_id: 312, value: "rev"}], 
  [{namespace: "amount", value: 0, owner_id: 102}, {namespace: "effect", value: "plush", owner_id: 102}] 
]

const flatPAI = productsAdditionalInfo.flat();

console.log(
products.map( p => 
  Object.assign(p,
    ...flatPAI.filter(
         info => info.owner_id == p.id
       ).map(
         info => ({[info.namespace]: info.value})))
)
);



// let whatItShouldBe = [ {id: 102, type: "toy", amount: 0, effect: "plush" }, {id: 245, type: "food", Duration: 5, effect: "Tail"}, {id: 312,  type: "clothes", Supplier: "rev"} ]
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】:

    猜你喜欢
    • 2020-02-21
    • 1970-01-01
    • 1970-01-01
    • 2019-01-19
    • 1970-01-01
    • 2023-02-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多