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(';')很容易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展flat 。 然后使用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