Store part of a JSON object in a javascript variable

Question

I would like to store a part of my main JSON object in a variable so that I can loop through it (For example, store 'cards' so I can loop through Govenors, Courses, and Teachers to get the 'title' and 'href' before creating an element with them). Currently I am doing:

var content = $.getJSON("website-contents.json");
var place = content["cards"];

When I call the contents variable in Chrome Dev Tools,it returns my main object but when I call the 'place' variable, it just returns undefined. I have also tried var place = content.cards and var place = content[0] but nothing seems to work. Here is my JSON (Apologies for the length)

{
  "accordian" : {
    "faqs" : {
      "head" : {
        "answer" : "Simon Firth",
        "question" : "Whos the head?"
      },
      "location" : {
        "answer" : "Wylye Bulding, Wiltshire College",
        "question" : "Where are we based?"
      }
    }
  },
  "article" : {
    "new-site" : {
      "Title" : "Launch of new website!",
      "author" : "Alex Shaw",
      "content" : "We now have a new website due to the amazing computing students!",
      "hashbang" : "newSite"
    },
    "test" : {
      "author" : "A Shaw",
      "content" : "This is a test article",
      "hashbang" : "test",
      "title" : "Test Article"
    }
  },
  "cards" : {
    "govenors":{
      "title":"Govenors",
      "href":"#govenors",
      "abanks":{
        "name":"Alec Banks"
      },
      "nowen":{
        "name":"Neil Owen"
      }
    },
    "courses" : {
      "title":"Courses",
      "href":"#courses",
      "Art" : {
        "teacher" : "Mrs Bellars",
        "title" : "Art"
      },
      "Biology" : {
        "teacher" : "Mrs Miller",
        "title" : "Biology"
      },
      "Computing" : {
        "teacher" : "Mr Chambers",
        "title" : "Computing"
      },
      "Further Maths" : {
        "teacher" : "Mr Grimsley",
        "title" : "Further Maths"
      },
      "Maths" : {
        "teacher" : "Mr Grimsley",
        "title" : "Maths"
      }
    },
    "teachers" : {
      "title":"Teachers",
      "href":"#teachers",
      "cchambers" : {
        "email" : "email1",
        "name" : "Craig Chambers"
      },
      "kgrimsley" : {
        "email" : "email2",
        "name" : "Kevin Grimsley"
      },
      "sfirth" : {
        "email" : "email3",
        "name" : "Simon Firth"
      }
    }
  }
}

arthurakay · Accepted Answer · 2015-06-30T12:45:41.130

7

getJSON() is asynchronous. You need to pass it a success handler, and parse the data out:

var place, 
    content = $.getJSON("website-contents.json", function(data) {
    place = data.cards;
});

edited Jun 30 '15 at 12:45

answered Jun 30 '15 at 12:34

arthurakay

5,261
7
37
57

That's right, I also would have done this way! Thanks! – webprogrammer Jun 30 '15 at 12:35
1

Notify: Content that you got is string. JSON.parse(data) creates JSON object from string if syntax is correct. – Pingwin Tux Jun 30 '15 at 12:38
Thank you, using your solution didnt quite work, however, changing "JSON.parse(data).cards" to "data.cards" worked. Thank you for the quick response! – Alex Shaw Jun 30 '15 at 12:38
1

Ah, `data` may already be parsed. You get the idea... glad it helped! – arthurakay Jun 30 '15 at 12:39
1

`$.getJSON` automatically parses the response. – Cerbrus Jun 30 '15 at 12:44
I updated the answer to reflect the fact that `data` should already be a JSON object. – arthurakay Jun 30 '15 at 12:46

score 1 · Answer 2 · answered Jun 30 '15 at 12:39

1

try this out ...

var place; 
var content = $.getJSON("website-contents.json", getcards);
function  getcards(content) {
    place = JSON.parseJSON(content).cards;
}

answered Jun 30 '15 at 12:39

kavetiraviteja

1,717
10
30

Store part of a JSON object in a javascript variable

2 Answers2