How do I loop through a JSON response and inserting into different elements

Question

I'm very limited in javascript knowledge.. i'd appreciate any suggestions.. I've looked through previous JSON questions and answers, but didn't see anything that was similar to this.

I'm using jQuery. I have a JSON server response in the following format:

{
  "aNumBids_1": "4",
  "aHighBid_1": "100.00",
  "aBidAmount_1": "110.00",
  "aBidEnd_1": "09/27/2013 17:00",
  "aNumBids_2": "42",
  "aHighBid_2": "1,210.00",
  "aBidAmount_2": "1,260.00",
  "aBidEnd_2": "09/27/2013 17:01",
  "aNumBids_3": "12",
  "aHighBid_3": "1,100.00",
  "aBidAmount_3": "1,150.00",
  "aBidEnd_3": "09/27/2013 17:02",
  "aNumBids_4": "26",
  "aHighBid_4": "1,460.00",
  "aBidAmount_4": "1,510.00",
  "aBidEnd_4": "09/27/2013 17:03",
  "aNumBids_5": "32",
  "aHighBid_5": "1,210.00",
  "aBidAmount_5": "1,260.00",
  "aBidEnd_5": "09/27/2013 17:04"
}

the first element of each pair is the element name on the page ( name='aBidAmount_5' ). The second element of each pair is the content to be placed into that element.

How do i go about looping through this json response ?

I've gotten this far:

AJAX.getPrice = function(){

  var request = $.ajax({
    url: serverScript,
    data: JSON.stringify(aItems) ,
    dataType: "json"
  });

  request.done(function() {
   // update the element value
    /* i'm lost here */
  });

  request.fail(function(jqXHR, textStatus) {
    // If console is available output the error to console log
    if (typeof console == "object") {
       console.log( "Request failed: " + textStatus +data );
    }
  });

}

Take the time to understand the answer from @OneOfOne...Especially the line: `$('#'+k).html(data[k]);` — David Tansey, Aug 31 '13 at 01:45
Ajax generally requires you to work with returned data in the done or success function, and sometimes people have a knee-jerk instinct to try to work around that (a good way to make buggy code, for instance, is to copy results to a global and ignore the implied synchronization problem) instead of work with it (by using the data only from the success or complete function). You might also read this: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Paul, Aug 31 '13 at 01:52

score 3 · Accepted Answer · answered Aug 31 '13 at 01:43

3

Assuming "element name" is the id of the element, this should work :

request.done(function(data) {
    for(var k in data) {
        if(data.hasOwnProperty(k)) {
            $('#'+k).html(data[k]);
        }
    }
});

answered Aug 31 '13 at 01:43

OneOfOne

95,033
20
184
185

1

i think they are input names since he mentions "_name='aBidAmount_5'_" – Patrick Evans Aug 31 '13 at 01:45

score 1 · Answer 2 · answered Aug 31 '13 at 01:45

1

if these are input names then in the done call back use

request.done(function(data) {
   for(i in data) {
      $("input[name="+i+"]").val(data[i]);
   }
});

answered Aug 31 '13 at 01:45

Patrick Evans

41,991
6
74
87

Thanks for the great ideas... Some of the elements are 100.00 some of the elements are inputs i tried the above code, but neither the td's or the inputs changed. in firebug, i can see the json request with updated values, but they are not getting into the elements. – Brian Wolfsohn Aug 31 '13 at 02:40
name isn't a valid attribute for td, also `.val` is for input fields, for an html element you use `.html(data[i])` – OneOfOne Aug 31 '13 at 03:27
I ended up with request.done(function(data) { for(var k in data) { if ( k.substr(0 , 10) == 'aBidAmount' ) { $("input[id="+k+"]").val(data[k]); } else if(data.hasOwnProperty(k)) { $('#'+k).html(data[k]); } } It seems to work.. But, i had to specify the name of the imput field. Is there a better way handle multiple input fields in the response ? @OneOfOne – Brian Wolfsohn Aug 31 '13 at 04:48
`$('input[name="' + k + '"]')` is the correct way to do that, you should move your `k.substr()` inside the `data.hasOwnProperty` block. – OneOfOne Aug 31 '13 at 14:09

score 0 · Answer 3 · answered Aug 31 '13 at 02:18

Js Fiddle: http://jsfiddle.net/vuQLu/

JS:

var output = '<ul>';
$.each(data, function(key, value){

    $.each(value, function(key, value){
        output += '<li>' + key + ' => ' + value + '</li>';
    });

});
output += '</ul>';

$(".myClass").html(output);

Html:

<div class="myClass"> </div>

How do I loop through a JSON response and inserting into different elements

3 Answers3