Placing JSON values from a json response, to HTML elements

Question

Every 2 seconds, I send out a POST that returns:

[{"a":false,"i":"58","b":"sergio","p":"0,22","t":15},
{"a":false,"i":"59","b":"sergio","p":"0,23","t":15},
{"a":false,"i":"60","b":"sergio","p":"0,14","t":15},
{"a":false,"i":"61","b":"sergio","p":"0,07","t":15}]

I have a Javascript function that captures this information and I'd like it to also parse the JSON and place the values into their appropriate elements.

function updateauctions(response) {
    //Parse JSON and place into HTML elements.

    //For debug purposes.
    alert(response);
}

I'm using jQuery and I'd like to know how to fetch JSON values, and place them into HTML elements.

An example of a div .auctionbox:

<div id="60" class="auctionbox gold">
    //Other things here.
</div>

For example, I have n amount of divs with class .auctionbox and each one of those divs also has an ID of #i. So each JSON object corresponds to a single .auctionbox. How would I place the p value of the JSON into the appropriate #i, .auctionbox?

With this simple example, I can start working on other requirements, I just need a little nudge. :)

Thank you.

Samich · Accepted Answer · 2011-09-21 17:57:13Z

5

http://jsfiddle.net/mA4Ye/4/

Solution with using the template if you need to perform some specific html + css

html

<div id="data">
    <div class="template auctionbox"></div>
</div>

js

var json = '[{"a":false,"i":"58","b":"sergio","p":"0,22","t":15},' +
    '{"a":false,"i":"59","b":"sergio","p":"0,23","t":15},' +
    '{"a":false,"i":"60","b":"sergio","p":"0,14","t":15},' +
    '{"a":false,"i":"61","b":"sergio","p":"0,07","t":15}]';

var data = $.parseJSON(json);
var $template = $('.template');

$(data).each(function() {
    var $element = $template.clone().removeClass('template').appendTo('#data');
    $element.attr('id', this.i);
    $element.html(this.p);
});

answered Sep 21, 2011 at 17:57

Samich

30.4k6 gold badges70 silver badges80 bronze badges

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

1 Comment

Only Bolivian Here Over a year ago

Your answer is very well written and tech agnostic. I love it!

roman · Accepted Answer · 2011-09-21 17:46:37Z

1

setInterval(function() {
    $.getJSON('your-json-url', function(json) {
        $(json).each(function() {
            $('#'+this.i).html(this.p);
        });
    });
}, 2000);

hope this helps

answered Sep 21, 2011 at 17:46

roman

11.3k1 gold badge33 silver badges42 bronze badges

2 Comments

Only Bolivian Here Over a year ago

And how would I invoke that getJSON every 2 seconds? Currently I have a generated hidden link that's .Click()'d every 2 seconds using a javascript timer.

roman Over a year ago

if you use var my_interval = setInterval ... you can also use clearInterval(my_interval) to stop the whole process

leo.vingi · Accepted Answer · 2011-09-21 17:46:00Z

0

var obj = $.parseJSON(data); // data is the returned JSON string
for( var i in obj){
    $('.auctionbox'+i).html( obj[i].a );
}

That would add the contents of obj.a into a div with the class .auctionbox0, auctionbox1, etc.

Also, I'm not sure you an use numbers as IDs on HTML elements.

answered Sep 21, 2011 at 17:46

leo.vingi

1,8421 gold badge12 silver badges17 bronze badges

Comments

Nicola Peluchetti · Accepted Answer · 2011-09-21 17:46:23Z

0

You could do:

var response = [{"a":false,"i":"58","b":"sergio","p":"0,22","t":15},
{"a":false,"i":"59","b":"sergio","p":"0,23","t":15},
{"a":false,"i":"60","b":"sergio","p":"0,14","t":15},
{"a":false,"i":"61","b":"sergio","p":"0,07","t":15}];

function updateauctions(response) {
    for (i=0; i<response.length; i++){
    //if the ids are unique just leave the class alone and select the div with the id
    var id = 'div#'+response[i].i;

    $(id).html(response[i].p);
    //For debug purposes.
    }
}

answered Sep 21, 2011 at 17:46

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

Comments

user400654 · Accepted Answer · 2011-09-21 17:54:13Z

0

assuming the json response is already parsed to a js object (using dataType: "json" with $.ajax() or setting the optional 4th parameter to "json" with $.get() or $.post()), you can loop through the json array using $.each(), then navigate to each div to set it's value.

$.each(response,function(i,item) {
  $("#id-" + item.i).html(item.p);
});

Note: id's cannot start with a number, they must start with an alpha character. because of this, i assumed you would add id- to the id's.

Edit: here's how i would suggest doing it every 2 seconds:

var timer;
(function ajaxInterval(){
  $.getJSON(url,data,function(){
    timer = setTimeout(function(){
      ajaxInterval();
    },2000);
  });
})();

edited Sep 21, 2011 at 17:54

answered Sep 21, 2011 at 17:47

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Comments

Donnie · Accepted Answer · 2011-09-21 18:02:45Z

0

I think you want something like this inside your function:

$.each(response, function(key, item) {
    $('#' + item.i).text(item.p);
});

answered Sep 21, 2011 at 18:02

Donnie

6,35910 gold badges38 silver badges55 bronze badges

Comments

Chad Brown · Accepted Answer · 2011-12-29 08:22:07Z

I second Samich's answer and say use a templating engine that specializes in converting json to html like json2html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://json2html.com/js/jquery.json2html-2.3-min.js"></script>

<div id='list'></div>

<script>

var json =
[{"a":false,"i":"58","b":"sergio","p":"0,22","t":15},
{"a":false,"i":"59","b":"sergio","p":"0,23","t":15},
{"a":false,"i":"60","b":"sergio","p":"0,14","t":15},
{"a":false,"i":"61","b":"sergio","p":"0,07","t":15}];

//Transform used to create the div
var transform = 
    {tag:'div',id:'.i',class:'actionbox gold',children:[
        {tag:'span',html:'.b'},
        {tag:'span',html:' + other stuff'}
    ]};

//Render the json into a list of divs
$('#list').json2html(json, transform);
</script>

Collectives™ on Stack Overflow

Placing JSON values from a json response, to HTML elements

7 Answers 7

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related