CODEWITHSUNDEEP
javascriptjquerycssjson
user7243719
user7243719

Reputation:

How to append JSON to div

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.

Upvotes: 3

Views: 6264

Answers (3)

AimeTPGM
AimeTPGM

Reputation: 241

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>

Upvotes: 0

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 2

Kushan
Kushan

Reputation: 10695

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

Upvotes: 0

Related Questions