Accessing Nested arrays in Json using .$each

Question

So I'm having a problem accessing my json when its in a nested array. I previously had json set up like this with just one array and my .$each function worked perfectly. However I'm having trouble modifying it for this. Json:

 {
 "tcontent": [{

  "Name": "Septicaemia",
  "url":"<a>",
  "image":"<div class='grid' style='background-image:url(img/anatomy/septicaemia.jpg);'>",
  "Variations": [{ 
      "condition":"Community-acquired",
      "organisms":"Staph. aureus",
      "antimicrobial":"Flucloxacillin ",
      "alternative":"(non anaphylaxis): ",
      "comments": "Perform full septic screen."

      }, {

      "Condition":"Community-acquired if intra- abdominal source suspected",
      "Organisms":"Predominantly Gram negatives and anaerobes Enterococci may also feature",
      "Antimicrobial":"Co-amoxiclav 1.2g iv tds",
      "Comments":"Perform full septic screen"

      }, {

      "Condition":"Healthcare-associated",
      "Organisms":"Varies",
      "Antimicrobial":"Piperacillin",
      "Alternative":"Seek advice from Consultant Microbiologist",
      "Comments":"Always"
     }]

   }, {

  "Name": "Infective Endocarditis (IE) (pending blood culture results)",
  "url":"<a>",
  "image":"<div class='grid' style='background-image:url(img/anatomy/endocarditis.jpg);'>"

  }, {

  "Name": "Central Nervous System Infections",
  "url":"<a>",
  "image":"<div class='grid' style='background-image:url(img/anatomy/cns.jpg);'>"

  }, {

  "Name": "Skin and Soft Tissue Infections",
  "url": "<a>",
  "image":"<div class='grid' style='background-image:url(img/anatomy/skin.jpg);'>"

  }, {

  "Name": "Diabetic patients with foot infections",
  "url": "<a>",
  "image":"<div class='grid' style='background-image:url(img/anatomy/foot.jpg);'>"

  }, {

  "Name": "Bone and Joint Infections",
  "url": "<a>",
  "image":"<<div class='grid' style='background-image:url(img/anatomy/bone.jpg);'>"

  }, {

  "Name": "Intravascular Line Infections",
  "url": "<a>",
  "image":"<div class='grid' style='background-image:url(img/anatomy/intravascular.jpg);'>"

  }, {

  "Name": "Urinary Tract Infections",
  "url": "<a>",
  "image":"<div class='grid' style='background-image:url(img/anatomy/urinary.jpg);'>"

  }, {

  "Name": "Respiratory Tract Infections",
  "url": "<a>",
  "image":"<div class='grid' style='background-image:url(img/anatomy/respiratory.jpg);'>"

  }, {

  "Name": "Gastrointestinal Infections",
   "url": "<a>",
   "image":"<div class='grid'        style='backgroundimage:url(img/anatomy/gastrointestinal.jpg);'>"

    }]

   }

Here's my javascript to access it.

$(function (){
var imp = "Json/therapy.json"
 $.getJSON(imp, function(data) {
   var info = "<br>";
   $.each(data.tcontent, function(i, item) {
  if(item.Name=='Septicaemia'){
     var search = item.Variations;
     $.each(item.Variations, function(j, subitem) {
      info += subitem.condition + subitem.organisms + subitem.antimicrobial + subitem.alternative + subitem.comments
       });
 $(info).appendTo(".menu");
 //alert(item)
   };
  });
 });
}); 

I've tried a many variations on the var search but nothing seems to be working. I researched a lot of similar problems to this and I've been stuck on this for too long. Any light that can be shed on the situation would be much appreciated!

Answer 1

2 reasons why it doesn't work.

First of all javascript is case sensitive, Your variations differ.

subitem.condition fails on :

  "Condition":"Community-acquired if intra- abdominal source suspected",
  "Organisms":"Predominantly Gram negatives and anaerobes Enterococci may also feature",
  "Antimicrobial":"Co-amoxiclav 1.2g iv tds",
  "Comments":"Perform full septic screen"

So change "Condition" to "condition", etc.etc.

second reason is the

Change $(info).appendTo(".menu"); to $(".menu").append(info) ;

Why?

$(".menu").append(info) Will just paste the string in the selected DOM element.

But you use

$(info)... and jquery does all kinds of fancy stuff now.

It tries to either use it as DOM selector, or create a new element.

Because your info starts with <br> $(info) tries to create a DOM element and it removes all text. Leaving just <br> because br cannot contain content.

Try to remove the initial <br> then you will see following error:

Uncaught Error: Syntax error, unrecognized expression:Community-acquiredStaph. aureusFlucloxacillin...

For example if you would type $("hahaha") , Jquery will try to find the tag <hahaha> , So when you remove the <br> your $(info) is looking for the tag <Community-acquiredStaph. aureusFlucloxacillin...> <Community-acquiredStaph. aureusFlucloxacillin...> .

But because your string would then contain weird characters like "-()." It will fail. Hence the above error.

So you can only add html like this:

$("<span>hahah</span>").appendTo($(".menu"));

Or use selector

$("#myDiv").appendTo($(".menu"));

An example when $(info).appendTo(".menu"); working is:

$.each(data.tcontent, function(i, item) {
    if(item.Name=='Septicaemia'){
        var search = item.Variations;
        $.each(item.Variations, function(j, subitem) {
            var info = "<p>" + subitem.condition + subitem.organisms + subitem.antimicrobial + subitem.alternative + subitem.comments + "</p>";
            $(info).appendTo(".menu");
        });

    }
});

Using the following json:

http://pastebin.com/Bzpix1ai