Placer JSON valeurs à partir d'une réponse json, HTML, les éléments

Toutes les 2 secondes, j'envoie un POST qui renvoie:

[{"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 rend compte de cette information et j'aimerais qu'il a également parser le JSON et de 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 j'aimerais savoir comment faire pour récupérer JSON valeurs, et de les placer dans des éléments HTML.

Un exemple de div .auctionbox:

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

Par exemple, j'ai n montant des divs avec classe .auctionbox et chacun de ces divs dispose également d'un ID de #i. De sorte que chaque objet JSON correspond à un seul .auctionbox. Comment devrais-je placer le p valeur du JSON dans le #i, .auctionbox?

Avec ce simple exemple, je peux commencer à travailler sur d'autres, j'ai juste besoin d'un petit coup de coude. 🙂

Merci.

InformationsquelleAutor Only Bolivian Here | 2011-09-21

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

Solution avec l'aide du modèle si vous avez besoin de réaliser certaines html + css

html

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

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);
});

Votre réponse est très bien écrit et tech agnostique. Je l'adore!

InformationsquelleAutor Samich

1
```
setInterval(function() {
    $.getJSON('your-json-url', function(json) {
        $(json).each(function() {
            $('#'+this.i).html(this.p);
        });
    });
}, 2000);
```
espère que cette aide
- Et comment pourrais-je invoquer que getJSON toutes les 2 secondes? Actuellement, j'ai un lien caché que l' .Cliquez sur()'d toutes les 2 secondes à l'aide d'un javascript timer.
- si vous utilisez var my_interval = setInterval ... vous pouvez également utiliser la fonction clearInterval(my_interval) pour arrêter l'ensemble du processus
InformationsquelleAutor roman
0
```
var obj = $.parseJSON(data); //data is the returned JSON string
for( var i in obj){
    $('.auctionbox'+i).html( obj[i].a );
}
```
Qui permettrait d'ajouter le contenu de obj.a dans un div avec la classe .auctionbox0, auctionbox1, etc.

Aussi, je ne suis pas sûr de l'utilisation des numéros d'Id sur des éléments HTML.

InformationsquelleAutor leo.vingi

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

InformationsquelleAutor Nicola Peluchetti

0

en supposant que la réponse json est déjà analysée à un js objet (à l'aide de dataType: "json" avec $.ajax() ou le réglage de l'option 4ème paramètre de "json" avec $.get() ou $.post()), vous pouvez parcourir le tableau json à l'aide de $.each(), puis accédez à chaque div pour définir la valeur.
```
$.each(response,function(i,item) {
  $("#id-" + item.i).html(item.p);
});
```
Remarque: les id ne peut pas commencer par un nombre, ils doivent commencer par un caractère alphabétique. de ce fait, j'ai supposé que vous ajoutez du code pour les id.

Edit: voici comment je suggère de le faire toutes les 2 secondes:
```
var timer;
(function ajaxInterval(){
  $.getJSON(url,data,function(){
    timer = setTimeout(function(){
      ajaxInterval();
    },2000);
  });
})();
```
InformationsquelleAutor user400654
0

Je pense que vous voulez quelque chose de ce genre à l'intérieur de votre fonction:
```
$.each(response, function(key, item) {
    $('#' + item.i).text(item.p);
});
```
InformationsquelleAutor Donnie

J'deuxième Samich de répondre et de dire l'utilisation d'un moteur de template qui se spécialise dans la conversion de json pour le 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>

InformationsquelleAutor Chad Brown

Vous devez vous connecter pour publier un commentaire.