循環通過一個JSON數組在javascript中的具體數據

Question

我想循環通過我的JSON數組，並獲得ItemName和價格根據類別，當我選擇一個特定的類別：美味對待，裝飾和娛樂，並顯示它們在多個下拉列表。我寫的代碼是獲取一個選擇標籤中所有類別的所有ItemName和價格。 繼承人我的代碼

function data() { 
var text = '{"DataArray":[{"ItemName":"Salmon Puffs","Price":5,"Category":"Delicious Treats"},{"ItemName":"Beans on Toast Sandwich","Price":200,"Category":"Delicious Treats"},{"ItemName":"Whole Mashed Potatoes","Price":50,"Category":"Delicious Treats"},{"ItemName":"Calamari","Price":20,"Category":"Delicious Treats"},{"ItemName":"Egyptian Decor Pack","Price":300,"Category":"Decoration"},{"ItemName":"Marie Biscuits","Price":80,"Category":"Delicious Treats"},{"ItemName":"Middle Eastern Decor Pack","Price":390,"Category":"Decoration"},{"ItemName":"Star Wars Decor Pack","Price":360,"Category":"Decoration"},{"ItemName":"Hipster Decor Pack","Price":350,"Category":"Decoration"},{"ItemName":"Pears shaped liked Apples","Price":1000,"Category":"Delicious Treats"},{"ItemName":"Flowers","Price":20,"Category":"Decoration"},{"ItemName":"Dance Floor","Price":60,"Category":"Entertainment"},{"ItemName":"Clowns","Price":20.35,"Category":"Entertainment"},{"ItemName":"Fire Dancers","Price":80,"Category":"Entertainment"},{"ItemName":"Cantina Band","Price":2000,"Category":"Entertainment"},{"ItemName":"Improved Salmon Puffs","Price":5,"Category":"Delicious Treats"}]}'; 

obj = JSON.parse(text); 

}

for (i = 0; i < obj.DataArray.length; i++) 
    { 
     addOption(document.drop_list.item, obj.DataArray[i].Price, obj.DataArray[i].ItemName); 
    } 

任何援助將得到高度讚賞。感謝

這就是我一直在解釋

Answer 1

爲什麼不......

if (obj.DataArray[i].Category == 'Delicious Treats') 
    addOption(document.drop_list.item, obj.DataArray[i].Price, obj.DataArray[i].ItemName); 

Answer 2

obj是獲得data函數內部更新。所以在執行之前需要調用data。

這裏是正在記錄price & itemName

function data() { 
 
    var text = '{"DataArray":[{"ItemName":"Salmon Puffs","Price":5,"Category":"Delicious Treats"},{"ItemName":"Beans on Toast Sandwich","Price":200,"Category":"Delicious Treats"},{"ItemName":"Whole Mashed Potatoes","Price":50,"Category":"Delicious Treats"},{"ItemName":"Calamari","Price":20,"Category":"Delicious Treats"},{"ItemName":"Egyptian Decor Pack","Price":300,"Category":"Decoration"},{"ItemName":"Marie Biscuits","Price":80,"Category":"Delicious Treats"},{"ItemName":"Middle Eastern Decor Pack","Price":390,"Category":"Decoration"},{"ItemName":"Star Wars Decor Pack","Price":360,"Category":"Decoration"},{"ItemName":"Hipster Decor Pack","Price":350,"Category":"Decoration"},{"ItemName":"Pears shaped liked Apples","Price":1000,"Category":"Delicious Treats"},{"ItemName":"Flowers","Price":20,"Category":"Decoration"},{"ItemName":"Dance Floor","Price":60,"Category":"Entertainment"},{"ItemName":"Clowns","Price":20.35,"Category":"Entertainment"},{"ItemName":"Fire Dancers","Price":80,"Category":"Entertainment"},{"ItemName":"Cantina Band","Price":2000,"Category":"Entertainment"},{"ItemName":"Improved Salmon Puffs","Price":5,"Category":"Delicious Treats"}]}'; 
 

 
    obj = JSON.parse(text); 
 
} 
 
data(); 
 
for (i = 0; i < obj.DataArray.length; i++) { 
 
    console.log(obj.DataArray[i].Price, obj.DataArray[i].ItemName); 
 
}

Answer 3

一個片段，我認爲這是你想要做什麼。讓我知道如果這是不正確的。

var obj = { 
 
    "DataArray": [ 
 
    { 
 
     "ItemName": "Salmon Puffs", 
 
     "Price": 5, 
 
     "Category": "Delicious Treats" 
 
    }, 
 
    { 
 
     "ItemName": "Beans on Toast Sandwich", 
 
     "Price": 200, 
 
     "Category": "Delicious Treats" 
 
    }, 
 
    { 
 
     "ItemName": "Whole Mashed Potatoes", 
 
     "Price": 50, 
 
     "Category": "Delicious Treats" 
 
    }, 
 
    { 
 
     "ItemName": "Calamari", 
 
     "Price": 20, 
 
     "Category": "Delicious Treats" 
 
    }, 
 
    { 
 
     "ItemName": "Egyptian Decor Pack", 
 
     "Price": 300, 
 
     "Category": "Decoration" 
 
    }, 
 
    { 
 
     "ItemName": "Marie Biscuits", 
 
     "Price": 80, 
 
     "Category": "Delicious Treats" 
 
    }, 
 
    { 
 
     "ItemName": "Middle Eastern Decor Pack", 
 
     "Price": 390, 
 
     "Category": "Decoration" 
 
    }, 
 
    { 
 
     "ItemName": "Star Wars Decor Pack", 
 
     "Price": 360, 
 
     "Category": "Decoration" 
 
    }, 
 
    { 
 
     "ItemName": "Hipster Decor Pack", 
 
     "Price": 350, 
 
     "Category": "Decoration" 
 
    }, 
 
    { 
 
     "ItemName": "Pears shaped liked Apples", 
 
     "Price": 1000, 
 
     "Category": "Delicious Treats" 
 
    }, 
 
    { 
 
     "ItemName": "Flowers", 
 
     "Price": 20, 
 
     "Category": "Decoration" 
 
    }, 
 
    { 
 
     "ItemName": "Dance Floor", 
 
     "Price": 60, 
 
     "Category": "Entertainment" 
 
    }, 
 
    { 
 
     "ItemName": "Clowns", 
 
     "Price": 20.35, 
 
     "Category": "Entertainment" 
 
    }, 
 
    { 
 
     "ItemName": "Fire Dancers", 
 
     "Price": 80, 
 
     "Category": "Entertainment" 
 
    }, 
 
    { 
 
     "ItemName": "Cantina Band", 
 
     "Price": 2000, 
 
     "Category": "Entertainment" 
 
    }, 
 
    { 
 
     "ItemName": "Improved Salmon Puffs", 
 
     "Price": 5, 
 
     "Category": "Delicious Treats" 
 
    } 
 
    ] 
 
}; 
 

 
var arr = obj.DataArray; 
 

 
var select = document.createElement('select'); 
 
var map = {}; 
 

 
function addOption(optgroup, price, name) { 
 
    var option = document.createElement('option'); 
 
    
 
    option.textContent = '$' + price.toFixed(2) + ': ' + name; 
 
    
 
    optgroup.appendChild(option); 
 
} 
 

 
arr.forEach(function (item) { 
 
    var optgroup = map[item.Category]; 
 

 
    if (!optgroup) { 
 
    select.appendChild(map[item.Category] = optgroup = document.createElement('optgroup')); 
 
    optgroup.setAttribute('label', item.Category); 
 
    } 
 
    
 
    addOption(optgroup, item.Price, item.ItemName); 
 
}); 
 

 
document.body.appendChild(select);