retrieve values from JSON array using Jquery

Question

If the name is equal to Test , is it possible to print the Can , Bottle and Fountain

Could anybody please help to put a condition inside the if block to match the criteria ??

$.each(value, function (i, v) {
if(i.name=="Test")
{

}
});

From the below JSON format

[
    {
        "id": "0004",
        "name": "Test",
        "image": {
            "url": "images/0001.jpg",
            "width": 200,
            "height": 200
        },
        "Can": [
            "250ml",
            "300ml",
            "330ml",
            {
                "image": "images/0001.jpg"
            }
        ],
        "Bottle": [
            "350ml",
            "600ml",
            {
                "image": "images/0001.jpg"
            }
        ],
        "Fountain": [
            "small",
            "large",
            {
                "image": "images/0001.jpg"
            }
        ]
    }
]

This json structure seems off. First an id and a name as keys but then "Can", "Bottle", "Fountain" as keys? What are we missing here? — Henrik Andersson, May 28 '14 at 16:18
See this question http://stackoverflow.com/questions/10221229/list-all-keys-and-values-of-json — Wilfredo P, May 28 '14 at 16:34

ubergoober · Answer 1 · 2014-05-28T18:03:17.770

For the sake of simply answering the question directly, here's a quick example at jsFiddle.

// jquery Example
$(json).each(function() {
  if (this.name === "Test"){
    console.log(this.Can);
    console.log(this.Bottle);
    console.log(this.Fountain);
    $("#jQuery").append(JSON.stringify(this.Can)+"<br>");
    $("#jQuery").append(JSON.stringify(this.Bottle)+"<br>");
    $("#jQuery").append(JSON.stringify(this.Fountain)+"<br>");
  };
});

// pure JS example
for (i = 0; i < json.length; i++ ) {
  if (json[i].name === "Test"){
    console.log(json[i].Can);
    console.log(json[i].Bottle);
    console.log(json[i].Fountain);
    var out = document.getElementById("nojQueryResults");
    out.innerHTML = out.innerHTML + JSON.stringify(json[i].Can)+"<br>";
    out.innerHTML = out.innerHTML + JSON.stringify(json[i].Bottle)+"<br>";
    out.innerHTML = out.innerHTML + JSON.stringify(json[i].Fountain)+"<br>";
  };
};

// jquery Example iterate over all nodes when found
// json should be refactored to make an array in the found object 
// that contains only what you want to extract here. Say maybe a type: key
// otherwise you'll get everything in this /flat/ node
$(json).each(function() {
  if (this.name === "Test"){
    $(this).each(function() {
      console.log(this);
      $("#IterateAllChildNodes").append(JSON.stringify(this)+"<br>");
    })
  }
});



// pure JS example iterate over all nodes when found
// json should be refactored to make an array in the found object 
// that contains only what you want to extract here. Say maybe a type: key.
// otherwise you'll get everything in this /flat/ node
for (i = 0; i < json.length; i++ ) {
  if (json[i].name === "Test"){
    console.log(json[i]);
    var out = document.getElementById("NoJqueryIterateAllChildNodes");
    out.innerHTML = out.innerHTML + JSON.stringify(json[i])+"<br>";
  };
};

EDIT I've extended the jsFiddle with a few more examples. Pure JS and 2 more that iterate over all the nodes in the found node as mentioned a possibility in comments that those may not be your only three items you're looking for. Your json isn't formed to where the specific "types" are in their own node, so you'll get everything in the /found/ node unless you provide additional exclusion logic, which you'll have to update later if ever an additional key/value was added to this node which you didn't want outputting. Consider adding a type and putting the Can/Bottle/Fountain in that to iterate over.

Your answer assumes that Can, Bottle and Fountain is known at development time but what if it's not known at development time and only known during execution. Javascript introspection is the key here. — TchiYuan, May 28 '14 at 17:30
Well, the question was specific, but you're right that it can be read as printing all elements under "Test". In which case, just loop in index 0. Of course this rabbit hole could go much deeper (ex: but what if they wanted to print the nodes below a specific node, or all nodes recursively, etc)... in which case the OP should elaborate. I'll update my answer to give a more generic example. (edit: just reread my comment, and I've made a pure js example as well, which is using indexing. jQuery would do an each.) .. answer update pending — ubergoober, May 28 '14 at 17:43
After updating the jsFiddle, I realized that the "types" aren't a child node, therefore it appears he may get more than he wanted if iterating. Although, maybe he wants all the data from that node. But since he specifically mentioned Can/Bottle/Fountain, I'll assume that's what he's after. Either way I provided examples for all. /shrug/. I'm also evidently assuming the OP is a he. :) — ubergoober, May 28 '14 at 18:06

score 0 · Answer 2 · edited May 23 '17 at 10:32

Your JSON structure is also a javascript object. Your object has 6 properties : "id", "name", "image", "Can", "Bottle", "Fountain".

What you need is to use javascript introspection and loop through the properties of your object, see the following stackoverflow question:

How to do JavaScript object introspection?

$(json).each(function() {
  if (this.name === "Test"){
    for(var propName in this) {
      if(typeof(obj[propName]) != "undefined") {
         console.log(propName);
      }
    }
  }
});

retrieve values from JSON array using Jquery

2 Answers2