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"
            }
        ]
    }
]

Answer 1

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.

Answer 2

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