CODEWITHSUNDEEP
javascriptjqueryjson
Lieutenant Dan
Lieutenant Dan

Reputation: 8274

access multiple instance of JSON keys/arrays values to HTML

My first one/instance outputs fine.. However, if there is multiple found from 'ZipSearch' variable (which is the JSON header i.e. in my JSON code below, parrent 23222 value), "23222":[ ...

Below is a recent attempt at using [2] have also tried [1] etc. Any ideas on how to output the content of the following JSON datas with common Key value? Into my HTML page?

                    $('span.zip').html(myjson[ZipSearch][0].Zipcode);
                    $('span.state').html(myjson[ZipSearch][0]["Primary State"]);
                    $('span.city').html(myjson[ZipSearch][0].City);
                    $('span.countyS').html(myjson[ZipSearch][0]["County S"]);
                    $('span.county').html(myjson[ZipSearch][0].County);

                    $('span.zip1').html(myjson[ZipSearch][2].Zipcode);
                    $('span.state1').html(myjson[ZipSearch][2]["Primary State"]);
                    $('span.city1').html(myjson[ZipSearch][2].City);
                    $('span.countyS1').html(myjson[ZipSearch][2]["County S"]);
                    $('span.county1').html(myjson[ZipSearch][2].County);

Here's my JSON. 

"23222":[ # sometimes has multiple responses per, ie below
{"Zipcode":"23222","City":"","Primary State":"Virginia","County S":"555","County":"Sample City"},
{"Zipcode":"23222","City":"","Primary State":"Utah","County S":"444","County":"Sample Bigger City"}
],

Basically, I'm unable to output the second line above, Utah etc, in my HTML page...... Just always repeating the content from the first.

This is the mark-up: (I am just trying to handle the content if there is multiple common arrays)

    <li class="zip">Zip Code: <span class="zip"></span></li>
    <li class="state">Primary State:  <span class="state"></span></li>
    <li class="city">City:  <span class="city"></span></li>
    <li class="countySSA">County SSA:  <span class="countyS"></span></li>
    <li class="county">County:  <span class="county"></span></li>

    <li class="zip1">Zip Code: <span class="zip1"></span></li>
    <li class="state1">Primary State:  <span class="state1"></span></li>
    <li class="city1">City:  <span class="city1"></span></li>
    <li class="countySSA1">County SSA:  <span class="countyS1"></span></li>
    <li class="county1">County:  <span class="county1"></span></li>

Update:

So, I have just tried this, below per answer - and still it just prints one set of arrays values to HTML.

                myjson[ZipSearch].forEach(function(innerobj,index){
                    $('span.zip'+index).html(innerobj["Zipcode"]);
                    $('span.county'+index).html(innerobj["County"]);
                    $('span.county1'+index).html(innerobj["County"]);
                })

Upvotes: 0

Views: 64

Answers (1)

Mohan
Mohan

Reputation: 84

if your object is 

 var obj=[ 
    {"Zipcode":"23222","City":"","Primary State":"Virginia","County S":"555","County":"Sample City"},
    {"Zipcode":"23222","City":"","Primary State":"Utah","County S":"444","County":"Sample Bigger City"}
    ]

use for each to access multiple object 

obj.forEach(function(innerobj,index){
        $('span.zip'+index).html(innerobj["Zipcode"]);
    })

Upvotes: 1

Related Questions