react javascript - json 如何将多个数组元素合并为一个字符串

Question

我有一个 JSON 响应，如下所示：

[{
    "id": 1,
    "food": {
      "fruits": ["Banana", "Orange", "Apple", "Mango"],
      "veggies": ["greens", "peppers", "carrot", "potatoes"],
    }
  },
  {
    "id": 2,
    "food": {
      "fruits": ["grapes", "berries", "peach", "pears"],
      "veggies": ["cabbage", "spinach"],
      "dairy": ["nutmilk", "goatmilk"]
    }
  }
]

现在我想将数组每个“id”（示例中为 1,2）合并到字符串（;分隔）中，如下所示：

id_1 = Banana;Orange;Apple;Mango;greens;peppers;carrot;potatoes

// observer "id_2" has additional array - "dairy"

id_2 = grapes;berries;peach;pears;cabbage;spinach;nutmilk;goatmilk

键是动态的，因此对于某些记录，有 2 个数组，对于某些记录，它可以是 3 或 4，也可能是 1。

我尝试使用react/Java Script

Array.concat()

，但我不知道如何动态地做到这一点。请帮我。谢谢你。

Answer 1

使用下面演示的

Object.values().flat().join(';')

可以轻松做到这一点：

let arr=[{"id":1,"food":{"fruits":["Banana","Orange","Apple","Mango"],"veggies":["greens","peppers","carrot","potatoes"],}},{"id":2,"food":{"fruits":["grapes","berries","peach","pears"],"veggies":["cabbage","spinach"],"dairy":["nutmilk","goatmilk"]}}];
const result = arr.map(({id,food}) => ({id, food: Object.values(food).flat().join(';')}));
console.log(result);

您可以轻松地重组输出，只需将其更改为例如

["id_"+id]: Object.values(...)

Answer 2

首先使用

map

、

flat

和

join

压平。然后使用

assign

将生成的对象数组转换为单个对象。

var db = [{"id": 1,"food": {"fruits": ["Banana", "Orange", "Apple", "Mango"], "veggies": ["greens","peppers","carrot","potatoes"], }},{"id" : 2,"food": {"fruits": ["grapes", "berries", "peach", "pears" ], "veggies": ["cabbage","spinach"], "dairy": ["nutmilk","goatmilk"]}}];

var flat = db.map(
  ({id, food}) => ({[`id_${id}`]: Object.values(food).flat().join(';')})
);
var result = Object.assign(...flat);
console.log(result);

Answer 3

这实际上是两个问题：循环遍历一个对象数组以将它们组合成一个对象，以及循环遍历一个对象以连接其所有数组。

首先解决第二个问题，这样的事情会起作用：

const concatArraysInObject = obj => 
  Object.values(obj).reduce((result, arr) => result.concat(arr), []);

const input = { a: [1,2,3], b: [4,5,6], c: [7,8,9] };
const output = concatArraysInObject(input);
console.log(output);

Object.values()

将为您提供对象中所有数组的数组。

reduce()

函数有两个参数：函数和初始值。

该函数还应该（至少）有2个参数：最后一次调用的结果（或初始值）和数组中的当前值。

它将为数组中的每个元素调用该函数一次。

现在，解决了这个问题，我们就可以解决第一个问题了。

为此，我们也可以使用

reduce()

，并且我们将在每次调用时构造组合对象。

const concatArraysInObject = (obj) => 
  Object.values(obj).reduce((result, arr) => result.concat(arr), []);
  
const mergeObjectsInArray = (arr, dataKey) =>
  arr.reduce((result, obj) => ({ ...result, [obj.id]: concatArraysInObject(obj[dataKey]) }), {});
  
const input = [
  { id: 'A', data: { a: [1,2,3], b: [4,5,6] } },
  { id: 'B', data: { c: [7,8,9], d: [10,11,12] } }
];

const output = mergeObjectsInArray(input, 'data');
console.log(output);

警告的重要注意事项：JavaScript 中不保证对象键顺序。虽然 99% 的情况下它们会按照您期望的顺序排列，但这并不能保证，因此如果您依赖于键的顺序来确定数组的顺序（如果顺序很重要），您将需要更改您的输入结构。如果顺序不重要，那么可能就很好了。

Answer 4

使用基本的 for 循环尝试此操作。在内部，您将动态计算键和值，该值是迭代对象的 Object.values 的扁平数组。

var input = [{
    id: 1,
    food: {
        fruits: ["Banana", "Orange", "Apple", "Mango"],
        veggies: ["greens", "peppers", "carrot", "potatoes"]
    }
},
{
    id: 2,
    food: {
        fruits: ["grapes", "berries", "peach", "pears"],
        veggies: ["cabbage", "spinach"],
        dairy: ["nutmilk", "goatmilk"]
    }
}
];

var temp = [];
for (var i = 0; i < input.length; i++) {
temp.push({
    [`id_${input[i].id}`]: Object.values(input[i].food)
        .flat(1)
        .join(";")
});
}
console.log(temp); // this gives you an array
console.log(Object.assign(...temp));// in case you require one single object