Converting JSON array in JSON object to array in jquery

Question

I'm trying to convert the following json:

{
    "questions": [
        {
            "question#1": "How much is 3+1",
            "correct answer": 1,
            "answers": {
                "ans#1": "5",
                "ans#2": "4",
                "ans#3": "3"
            }
        },
 {
            "question#5": "How much is 2+4",
            "correct answer": 0,
            "answers": {
                "ans#1": "6",
                "ans#2": "4",
                "ans#3": "7",
                "ans#4": "5"
            }
        }

    ]
}

by using the following code in Jquery:

$(document).ready(function(){
    $.getJSON("data.json", function(json) {
        console.log(json); // this will show the info it in firebug console
       var sarit = Object.keys(json); // "a"

    });

    /*var update = document.getElementById("content");
    update.innerHTML("test");*/

    document.getElementById("content").innerHTML =  JSON.stringify(sarit);
});

I got an error-Uncaught ReferenceError: sarit is not defined

How can I get the answers' value of each question, and use it in the html file, aka content

ShaneQful · Accepted Answer · 2014-08-05 21:46:00Z

1

sarit doesn't exist when document.getElementById("content").innerHTML = JSON.stringify(sarit); is called and it isn't in the scope so couldn't be seen even if it was try this instead.

$(document).ready(function(){
    $.getJSON("data.json", function(json) {
        console.log(json); // this will show the info it in firebug console
        var sarit = Object.keys(json); // "a"
        document.getElementById("content").innerHTML =  JSON.stringify(sarit);
    });
});

That said his will only get you ["questions"] displayed in your html page. In order to get the answers value you have to traverse the json to retrieve the values like so:

$(document).ready(function(){
    $.getJSON("data.json", function(json) {
        var anserFor1st = json.questions[0].answers;
        var anserFor2nd = json.questions[1].answers;//If it's more than two use a loop
        document.getElementById("content").innerHTML =  JSON.stringify(anserFor1st) + "<br/>" + JSON.stringify(anserFor2nd);
    });
});

edited Aug 5, 2014 at 21:46

answered Aug 5, 2014 at 21:37

ShaneQful

2,2862 gold badges18 silver badges24 bronze badges

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

7 Comments

Sara Over a year ago

Thank you it's working now! The problem is that the answers are presented like this {"ans#1":"5","ans#2":"4","ans#3":"3"} {"ans#1":"20","ans#2":"10","ans#3":"16","ans#4":"12","ans#5":"14","ans#6":"18"} my attention is only display the value (the answers themselves)

ShaneQful Over a year ago

If you want to only display the answers themselves loop through the answers to create a string and then display them e.g. var aString = ""; Object.keys(anserFor1st).forEach(function (k) {aString += anserFor1st[k] + "<br/>";}); Object.keys(anserFor2nd).forEach(function (k) {aString += anserFor2nd[k] + "<br/>";}); document.getElementById("content").innerHTML = aString; Also it's polite to accept an answer if you think it's correct :)

Sara Over a year ago

I didn't know about the "accept". I would gladly accept it if I knew how to.... How I do it?

ShaneQful Over a year ago

Click the checkmark under this post, on the left. (I think it's right below the arrows). See: meta.stackexchange.com/questions/23138/…

Sara Over a year ago

I accepted it:) 10x again! One last question: How I'm supposed to push the values dynamically . I should build JS multi select questionnaire.. so I need to display the values of the different question dynamically... I have to move between questions by back and forward buttons.

|

Claudio Redi · Accepted Answer · 2014-08-05 21:32:23Z

1

The scope of sarit is the succeed handler for getJSON, it doesn't exist outside.

Also, take into account that getJSON runs async so having a statement inmediatly after a call to this method depending on the response is wrong. The the ajax call won't be finished by the time next line is executed.

answered Aug 5, 2014 at 21:32

Claudio Redi

68.6k15 gold badges138 silver badges161 bronze badges

Collectives™ on Stack Overflow

Converting JSON array in JSON object to array in jquery

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related