Placer les valeurs JSON d'une réponse JSON, aux éléments HTML

Question

Toutes les 2 secondes, j'envoyer un POST qui retourne:

[{"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}] 

J'ai une fonction Javascript qui capture ces informations et je l'aime aussi analyser le JSON et placer les valeurs dans leurs éléments appropriés.

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

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

J'utilise jQuery et je voudrais savoir comment récupérer les valeurs JSON, et les placer dans des éléments HTML.

Un exemple d'un div .auctionbox:

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

Par exemple, j'ai n quantité de divs avec classe .auctionbox et chacun de ces divs a également un ID de #i. Chaque objet JSON correspond donc à un seul .auctionbox. Comment est-ce que je placerais la valeur p du JSON dans le #i, .auctionbox approprié?

Avec cet exemple simple, je peux commencer à travailler sur d'autres exigences, j'ai juste besoin d'un petit coup de pouce. :)

Merci.

Answer 1

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

Solution à l'aide du modèle si vous devez effectuer une html spécifique + 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); 
}); 

Answer 2

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

qui ajouterait le contenu de obj.a dans un div avec la classe .auctionbox0, auctionbox1, etc.

Aussi, je ne suis pas sûr que vous un nombre d'utilisation comme ID sur les éléments HTML.

Answer 3

Vous pouvez faire:

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. 
    } 
} 

Answer 4

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

espérons que cette aide

Answer 5

en supposant que la réponse JSON est déjà analysé à un objet js (en utilisant dataType: "json" avec $.ajax() ou réglage du 4ème paramètre facultatif se rapportant à "json" avec $.get() ou $.post()), vous pouvez parcourir le tableau json en utilisant $.each(), puis naviguer vers chaque div pour définir sa valeur.

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

Remarque: id ne peut pas commencer par un nombre, ils doivent commencer par un caractère alpha. à cause de cela, j'ai supposé que vous ajouteriez id- à l'ID.

Edit: Voici comment je vous conseille de faire toutes les 2 secondes:

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

Answer 6

Je pense que vous voulez quelque chose comme ça dans votre fonction:

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

Answer 7

Je deuxième réponse de Samich et de dire utiliser un moteur de templating qui se spécialise dans la conversion JSON en html comme 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>