Loop through a JSON array for specific data in javascript

Question

I am trying to loop through my json array and get the ItemName and Prices according to category when i select a particular category : Delicious Treats, Decoration and Entertainment and display them in a multiple drop down list. the code i wrote is getting all ItemName and prices for all categories in one select tag. heres my code

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

Any assistance will be highly appreciated. thanks

This is what i was explaining

I don't really understand what and get the ItemName and Prices according to category when i select a particular category means. Do you mean like a dropdown menu with multiple <optgroup>s? I'll just write an answer assuming that's what you meant. — Patrick Roberts
– Patrick Roberts, Commented Jun 19, 2017 at 16:30

VoteyDisciple · Accepted Answer · 2017-06-19 16:26:34Z

1

Why not just...

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

answered Jun 19, 2017 at 16:26

VoteyDisciple

37.9k5 gold badges100 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Felix Over a year ago

it worked thanks so much. how about to populate these properties in check boxes.

brk · Accepted Answer · 2017-06-19 16:35:04Z

obj is getting updated inside the data function. So before executing data need to be called.

Here is a snippet which is logging 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);
}

Patrick Roberts · Accepted Answer · 2017-06-19 17:19:21Z

I think this is what you're trying to do. Let me know if this is incorrect.

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

its correct but the in this case im populating it in a way to get item names according to selected categories
@Felix I don't understand what you mean by that. Could you update your question to show what you expect the resulting behavior to be? Preferably some HTML you expect to be generated, or whatever.

Collectives™ on Stack Overflow

Loop through a JSON array for specific data in javascript

3 Answers 3

1 Comment

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Related