嘗試創建一個新物件，然后將來自 JSON 檔案的嵌套值的所有物件連接起來。
JSON 資料比較大，所以取了一個樣例，叫它 var items
我遇到的問題是嵌套資料沒有更新新物件。
var items = [
{
"id": 11,
"title": "Fruit Test",
"releaseDateTime": "2021-10-21T10:50:00 09:30",
"mainContent": "Fruit order for 1 person",
"storeNames": [
"Store 1"
],
"items": [
{
"itemName": "Melon",
"otherName": "Watermelon"
},
{
"itemName": "Apple",
"otherName": "Red apple"
}
]
},
{
"id": 12,
"title": "Canned Test",
"releaseDateTime": "2021-10-21T10:50:00 09:30",
"mainContent": "Canned order for 2 people",
"storeNames": [
"Store 1"
],
"items": [
{
"itemName": "Tomatoes",
"otherName": "Diced tomato"
}
]
},
{
"id": 13,
"title": "Dairy Test",
"releaseDateTime": "2021-10-21T10:50:00 09:30",
"mainContent": "Dairy Order for 2 people",
"storeNames": [
"Store 1"
],
"items": []
}
]
;
var copyItems = [];
for (let i = 0; i < items.length; i ) {
items[i].allItems = items[i].items;
copyItems.push(items[i])
}
console.log(copyItems);
var copyItems = copyItems.map(function(elem){
return elem.allItems;
}).join(",");
console.log(`These are the final items ${copyItems}`);
我能夠創建新物件，并將嵌套陣列添加到它。但是我試圖讓 allItems 物件顯示如下資訊：
[
{
"id": 11,
"allItems": "Melon, Apple",
"title": "Fruit Test",
"releaseDateTime": "2021-10-21T10:50:00 09:30",
"mainContent": "Fruit order for 1 person",
"storeNames": [
"Store 1"
],
"items": [
{
"itemName": "Melon",
"otherName": "Watermelon"
},
{
"itemName": "Apple",
"otherName": "Red apple"
}
]
},
{
"id": 12,
"allItems": "Tomatoes",
"title": "Canned Test",
"releaseDateTime": "2021-10-21T10:50:00 09:30",
"mainContent": "Canned order for 2 people",
"storeNames": [
"Store 1"
],
"items": [
{
"itemName": "Tomatoes",
"otherName": "Diced tomato"
}
]
},
{
"id": 13,
"allItems": "",
"title": "Dairy Test",
"releaseDateTime": "2021-10-21T10:50:00 09:30",
"mainContent": "Dairy Order for 2 people",
"storeNames": [
"Store 1"
],
"items": []
}
]
這是我的 JSFiddle：https ://jsfiddle.net/buogdvx9/6/
Javascript 仍然是我正在學習和作業的語言，有些事情仍然讓我感到困惑。
謝謝你。
uj5u.com熱心網友回復：
您可以使用Array.map()創建新陣列，然后使用一些解構來創建此陣列中的每個新元素。
我們通過首先映射子項陣列以獲取子項名稱串列，然后使用Array.join()創建逗號分隔的字串，在每個新元素上創建 allitems 屬性。
你看到的作為 Array.map 的第一個引數的箭頭函式是 function(args) { .. } 的另一種寫法。
const items = [ { "id": 11, "title": "Fruit Test", "releaseDateTime": "2021-10-21T10:50:00 09:30", "mainContent": "Fruit order for 1 person", "storeNames": [ "Store 1" ], "items": [ { "itemName": "Melon", "otherName": "Watermelon" }, { "itemName": "Apple", "otherName": "Red apple" } ] }, { "id": 12, "title": "Canned Test", "releaseDateTime": "2021-10-21T10:50:00 09:30", "mainContent": "Canned order for 2 people", "storeNames": [ "Store 1" ], "items": [ { "itemName": "Tomatoes", "otherName": "Diced tomato" } ] }, { "id": 13, "title": "Dairy Test", "releaseDateTime": "2021-10-21T10:50:00 09:30", "mainContent": "Dairy Order for 2 people", "storeNames": [ "Store 1" ], "items": [] } ];
const result = items.map(({ id, ...rest}) => {
return {
id,
allItems: rest.items.map(el => el.itemName).join(', '),
...rest
};
});
console.log(result).as-console-wrapper { max-height: 100% !important; top: 0; }uj5u.com熱心網友回復：
既然只想更新現有的物件，就用forEach回圈遍歷陣列中的每一項，然后用map運算子回圈繁榮得到itemName的陣列。
items.forEach((obj) => {
obj.allItems = obj.items.map((item) => item.itemName)
});
console.log(items)
簡單的例子：
// iterating over the items
for (let i = 0; i < items.length; i ) {
let currentItem = items[i];
currentItem.allItems = []; // adding new empty array
for (let j = 0; j < currentItem.items.length; j ) {
currentItem.allItems.push(currentItem.items[j].itemName);
}
}
作業示例：
var items = [
{
"id": 11,
"title": "Fruit Test",
"releaseDateTime": "2021-10-21T10:50:00 09:30",
"mainContent": "Fruit order for 1 person",
"storeNames": [
"Store 1"
],
"items": [
{
"itemName": "Melon",
"otherName": "Watermelon"
},
{
"itemName": "Apple",
"otherName": "Red apple"
}
]
},
{
"id": 12,
"title": "Canned Test",
"releaseDateTime": "2021-10-21T10:50:00 09:30",
"mainContent": "Canned order for 2 people",
"storeNames": [
"Store 1"
],
"items": [
{
"itemName": "Tomatoes",
"otherName": "Diced tomato"
}
]
},
{
"id": 13,
"title": "Dairy Test",
"releaseDateTime": "2021-10-21T10:50:00 09:30",
"mainContent": "Dairy Order for 2 people",
"storeNames": [
"Store 1"
],
"items": []
}
]
;
// since you only want to update the existing object, using map to loop over each item in array
items.forEach((obj) => {
// using map to create the new array of just itemNames
obj.allItems = obj.items.map((item) => item.itemName)
});
console.log(items)uj5u.com熱心網友回復：
只要使用的組合Array.map和Array.join
邏輯
- 由于要創建新陣列，請
Array.map在父陣列上運行。 - 在父節點中的每個節點上回傳帶有一個額外鍵的整個節點
allItems。 - 用于
allItems從items每個節點中的陣列創建一個新陣列，然后加入空格
var items = [{"id":11,"title":"Fruit Test","releaseDateTime":"2021-10-21T10:50:00 09:30","mainContent":"Fruit order for 1 person","storeNames":["Store 1"],"items":[{"itemName":"Melon","otherName":"Watermelon"},{"itemName":"Apple","otherName":"Red apple"}]},{"id":12,"title":"Canned Test","releaseDateTime":"2021-10-21T10:50:00 09:30","mainContent":"Canned order for 2 people","storeNames":["Store 1"],"items":[{"itemName":"Tomatoes","otherName":"Diced tomato"}]},{"id":13,"title":"Dairy Test","releaseDateTime":"2021-10-21T10:50:00 09:30","mainContent":"Dairy Order for 2 people","storeNames":["Store 1"],"items":[]}];
const newItems = items.map(node => ({ ...node, allItems: node.items.map(item => item.itemName).join(" ")}));
console.log(newItems);轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/341043.html
標籤：javascript 数组 json 目的
上一篇：用JS迭代DOM屬性x次
下一篇：如何在按鈕標簽中添加圖示？