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!

Do you really need to use $.each? You can do for(var key in object) { var item = object[key]; } and for arrays the standard for syntax. — SamV
– SamV, Commented Feb 6, 2014 at 14:38
The first object in the Variations array has property names that are all lower-case and the rest of the objects' property names start with a capital letter. Is that present in your real code or just a copy/paste issue? — Jason P
– Jason P, Commented Feb 6, 2014 at 14:42

Timmetje · Accepted Answer · 2014-02-06 15:26:47Z

3

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...>.

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

edited Feb 6, 2014 at 15:26

answered Feb 6, 2014 at 14:51

Timmetje

7,70521 silver badges36 bronze badges

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

4 Comments

user400654 Over a year ago

condition to Condition

Darragh Over a year ago

A lazy error by me on the first one, apologies. I changed them and I also changed the second reason you gave and still no luck. I believe the second reason you gave for it being wrong is actually wrong itself as I've used that syntax in a similar method that just works on a single json array and I had no problems with it.

Timmetje Over a year ago

It depends but in this case, No, because the json differs you would need to change the json anyway. If the code stays the same, change all firstcase keys to lowercase.

Timmetje Over a year ago

@Darragh I explained now why $(info).appendTo(); doesn't work in your code case. And added a working example.

Collectives™ on Stack Overflow

Accessing Nested arrays in Json using .$each

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related