Question

我正在尝试循环浏览我的json数组并在我选择特定类别时根据类别获取ItemName和价格：Delicious Treats，Decoration和Entertainment并将它们显示在多个下拉列表中。我写的代码是在一个选择标记中获取所有类别的所有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＆amp;的片段。 itemName

＆＃13;

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);
}

＆＃13;

Answer 3

我认为这是你正在尝试做的事情。如果这不正确，请告诉我。

＆＃13;

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);

＆＃13;

在javascript中循环访问特定数据的JSON数组

3 个答案: