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