如何在 Javascript 中創建嵌套的 JSON Object？

Question

我想創建嵌套的 json 結構，但我做不到。 我想做如圖所示。 一些嵌套部分將是對象和 arrays。 這是一個非常困難和復雜的原理圖，所以需要幫助我如何在 Javascript 中做到這一點

架構：

{
  "name": "title",
  "img": "image_url",
  "food_kcal": "food_kcal",
  "units": [
    {
      "unit": "test1",
      "data": {
        "amount": "90.0000",
        "calcium": "5.4",
        "calory": "46.8"
      }
    },
    {
      "unit": "test2",
      "data": {
        "amount": "150.0000",
        "calcium": "9.0",
        "calory": "78.0"
      }
    },
    {
      "unit": "test3",
      "data": {
        "amount": "100.0000",
        "calcium": "6.0",
        "calory": "52.0"
      }
    }
  ]
}

我的代碼：

var jsonObj = {
   "food_name":"title",
   "food_image":"image",
   "food_kcal":"kcal_data",
   "units":[]
}; 


for (var i = 0; i < unit_list.length; i++) { 
   var unit = {};
   var dataObj={};
   unit.food_unit = unit_list[i].text; 
   
   var option = document.getElementsByTagName("option")[i];
   dataObj.amount= option.dataset.amount;
   dataObj.calcium= option.dataset.calcium;
   dataObj.calory= option.dataset.calory;

   jsonObj.units.push(unit);
   jsonObj.units.push(dataObj);
} 


var string = JSON.stringify(jsonObj);
console.log(JSON.parse(string)); 

Answer 1

每次通過循環時，您應該只將一個推入陣列，而不是兩個。 object 應該包含unit和dataObj作為嵌套屬性。

改變

   jsonObj.units.push(unit);
   jsonObj.units.push(dataObj);

至

jsonObj.units.push({
    unit: unit,
    data: dataObj
}

Answer 2

問題是因為您將單獨的值推送到數組，而不是包含它們的 object 。

話雖如此，代碼可以通過使用map()來簡化：

 // for demo only: let unit_list = [{ text: 'grams' }, { text: 'kilograms' }, { text: 'mililitres' }]; let obj = { food_name: "title", food_image: "image", food_kcal: "kcal_data", units: unit_list.map((item, i) => { var option = document.getElementsByTagName("option")[i]; return { food_unit: item.text, units: { amount: option.dataset.amount, calcium: option.dataset.calcium, calory: option.dataset.calory } } }) }; console.log(obj);

 <select> <option data-amount="1" data-calcium="10" data-calory="100">A</option> <option data-amount="2" data-calcium="20" data-calory="200">B</option> <option data-amount="3" data-calcium="30" data-calory="300">C</option> </select>