循环通过一个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);