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 脚本 Array.concat()，但我不确定如何动态执行。请帮我。谢谢。

Answer 1

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

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

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 2

使用下面演示的 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 3

尝试使用基本的 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

Answer 4

首先使用 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);

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

react javascript - json how to merge multiple array elements into one string

javascript

arrays

merge

concat