Creating lists from JSON object arrays and strings

Question

I have, what I assumed, was a relatively simple external but local JSON file that I want to strip data out of and save as variables for use within HTML.

There will be strings as well as numbers, the strings I'm looking to create lists out of, and the numbers I'm hoping to use as various CSS values.

There is a relation between the index of the objects – hopefully this will be clear when you read the JSON.

Not that it's particularly relevant to this question, but for the sake of background there are multiple JSON files, all formated the same, that the user 'filters' through by navigating.

The pages and data are loading with JQuery, particularly JQuery Mobile.

So example JSON is as follows…

{"glass" :[
    {"name" : "Gin and tonic",
      "ingredients" : {
         "liquids" : ["Gin", "Tonic"],
         "amounts" : [60, 40],
         "colours" : ["f5f5f5", "666666"]
      }
    },
    {"name" : "Tom Collins",
      "ingredients" : {
      "liquids" : ["Gin", "Soda"],
      "amounts" : [60, 80],
      "colours" : ["f5f5f5", "373737"]
      }
    }
]}

So thanks to you guys I now know how to match the name of the drink to the particular object…

function viewRecipe (recipeNamePassed) {
recipe = (recipeNamePassed);

//Get the JSON list and search through it for a match to the recipe name
$.getJSON(url, function(data) {
cache:false;
  for (var i=0;i<data.glass.length;i++){
    if (data.glass[i].name == recipe){
     // do stuff

…but I still don't seem to be able to create a list of remaining objects.

In other words, a list for 'liquids' and another for 'amounts'.

I've got stuff going on like this but it's not giving me the results I need

var output="<ul>";
for (var i in ingredients.liquids) {
    output+="<li>" + ingredients.liquids[i] + "</li>";
}
output+="</ul>";

document.getElementById("ingredientsList").innerHTML=output;

What I'd like is all of the ingredients to be written out to "ingredientsList", and the 'amounts' and 'colours' to be saved as variables that I can use to change the CSS.

As you can probably tell, I'm very new to all of this so I very much appreciate your patience.

Thanks in advance, Matt

Answer 1

You are probably missing the whole path to the itens.

Something like this should do the trick.

var output="<ul>";
for (var i in data.glass[i].ingredients.liquids) {
   output+="<li>" + data.glass[i].ingredients.liquids[i] + "</li>";
}
output+="</ul>";

document.getElementById("ingredientsList").innerHTML=output;

or you could copy the data to a variable to make it easier like

for (var i=0;i<data.glass.length;i++){
  var glass = data.glass[i]
  if (glass.name == recipe){

    var output="<ul>";
    for (var i in glass.ingredients.liquids) {
      output+="<li>" + glass.ingredients.liquids[i] + "</li>";
    }
    output+="</ul>";

    document.getElementById("ingredientsList").innerHTML=output;
  }
}

Hope it helps you.

Answer 2

I know you have posted only a snapshot of the code, but you would have to first access the list before processing it...

var ingredients = data.glass[i].ingredients;
var output="<ul>";
for (var i in ingredients.liquids)
....