How to append JSON to div

Question

I am new to web development and I am having hard time appending JSON to div so that the value is displayed on the webpage. I have checked other questions but most of the responses are associated with PHP which is not my case. Can anyone help me figure out what I am missing that is not letting the JSON value not to be displayed on a webpage. Here is some part of the JSON file content:

{ "array": [
   "firstArray": {
    "firstKey": "firstValue",
    "secondKey": "secondValue"
   },
   "secondArray":{
    "firstKey": "firstValue",
    "secondKey": "secondValue"
   }
  ]     
}

Here is part of JavaScript that I am expecting to display the value which is found under first array and first key of the above JSON

function print(data){   // lets assume data represents the whole JSON data
var newDiv = $("<div />", {'id': 'new'})
newDiv.append($("<span />", data.array[0].firstArray.firstKey}))
}

I am very new to web development and I am very interested to learn so please help me as much as possible.

Possible duplicate of [Format and append JSON data to html div](http://stackoverflow.com/questions/33749984/format-and-append-json-data-to-html-div) — Sumit patel, Mar 20 '17 at 04:02
`newDiv.append($("", data.array[0].firstArray.firstKey}))` - the wrong thing is at the ***last redundant*** `}`. Also by that code, the content will lie outside the created `span`. — Hopeless, Mar 20 '17 at 04:10
you're missing a `"` after `firstArray` in your JSON. This causes it to be invalid. — cloudworks, Mar 20 '17 at 04:32
http://stackoverflow.com/questions/11197818/how-do-i-make-a-json-object-with-multiple-arrays ...Just check it out here for the correct syntax for json with multiple array..it has the right one — Janen R, Mar 20 '17 at 04:34

Mamun · Accepted Answer · 2017-03-20T04:49:33.327

Try the following:

var data = { "array": [
   {"firstArray":{
    "firstKey": "firstValue",
    "secondKey": "secondValue"
   }},
   {"secondArray":{
    "firstKey": "firstValue",
    "secondKey": "secondValue"
   }}
  ]     
};

function print(data){  
    $('body').append($("<div id='new'/>"));
    $('body').append($("<div id='new2'/>"));

    $('#new').append($("<span>"+data.array[0].firstArray.firstKey+"   "+"</span>"));
    $('#new').append($("<span>"+data.array[0].firstArray.secondKey+"</span>"));

    $('#new2').append($("<span>"+data.array[1].secondArray.firstKey+"   "+"</span>"));
    $('#new2').append($("<span>"+data.array[1].secondArray.secondKey+"</span>"));
}

print(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Your solution is priceless. It is just the one I was looking for. Thank you very much. — , Mar 20 '17 at 04:58

Kushan · Answer 2 · 2017-03-20T04:36:00.253

0

Your json string is not validated.

Corected

{
"array": [{
    "firstArray": {
        "firstKey": "firstValue",
        "secondKey": "secondValue"
    }
}, {
    "secondArray": {
        "firstKey": "firstValue",
        "secondKey": "secondValue"
    }
}]

}

Now you can access like this,

data.array[0].firstArray.firstKey

edited Mar 20 '17 at 04:36

answered Mar 20 '17 at 04:30

Kushan

10,657
4
37
41

Thank you for your participation. – Mar 20 '17 at 05:00

score 0 · Answer 3 · answered Mar 20 '17 at 06:14

you can try this

(I extended from Mamun's comment)

// using JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> // using JQuery

<script>
//your array
var data = { "array": [
                    {
                    "firstKey": "firstValue",
                    "secondKey": "secondValue"
                    },
                    {
                    "firstKey": "firstValue",
                    "secondKey": "secondValue"
                    }
                ]     
            };


function print(data){  
    // loop for printing each element in array
    for (var i = 0; i < data.array.length; i++) {
        $('body').append($("<div id='new"+(i+1)+"'/>"));
        var id = "#new"+(i+1);
        $(id).append($("<span>"+data.array[i].firstKey+"   "+"</span>"));
        $(id).append($("<span>"+data.array[i].secondKey+"</span>"));
    };  
}

print(data);

</script>

How to append JSON to div

3 Answers3