jQuery / JSON multiple arrays

Question

I'm currently creating a newsfeed on my website. A PHP script is generating JSON after a SELECT query in my database. When I print_r() the result of this query, I get the following :

Array ( 
        [0] => Array ( 
                       [nom] => Monsieur 
                       [0] => Monsieur 
                       [prenom] => X 
                       [1] => X 
                       [id_promotion] => 17 
                       [2] => 17 
                       [id_commercant] => 236 
                       [3] => 236
                       [article] => article test
                       [4] => article test 
                       [rubrique] => 4 
                       [5] => 4 
                       [date_debut] => 2015-06-17 
                       [6] => 2015-06-17 
                       [date_fin] => 2015-06-25 
                       [7] => 2015-06-25 
                       [prix_origine] => 25 
                       [8] => 25 
                       [prix_promotion] => 20 
                       [9] => 20
                 )
        [1] => Array ( 
                       [nom] => Monsieur 
                       [0] => Monsieur 
                       [prenom] => X 
                       [1] => X 
                       [id_promotion] => 18 
                       [2] => 18 
                       [id_commercant] => 
                       236 [3] => 236 
                       [article] => article test2 
                       [4] => article test2 
                       [rubrique] => 4 
                       [5] => 4 
                       [date_debut] => 2015-06-18 
                       [6] => 2015-06-18 
                       [date_fin] => 2015-06-23 
                       [7] => 2015-06-23 
                       [prix_origine] => 30 
                       [8] => 30 
                       [prix_promotion] => 10 
                       [9] => 10 
             ) 
); 

The JSON output is the following :

[
{
    "0": "Monsieur",
    "1": "X",
    "2": "17",
    "3": "236",
    "4": "article test",
    "5": "4",
    "6": "2015-06-17",
    "7": "2015-06-25",
    "8": "25",
    "9": "20",
    "nom": "Monsieur",
    "prenom": "X",
    "id_promotion": "17",
    "id_commercant": "236",
    "article": "article test",
    "rubrique": "4",
    "date_debut": "2015-06-17",
    "date_fin": "2015-06-25",
    "prix_origine": "25",
    "prix_promotion": "20"
},
{
    "0": "Monsieur",
    "1": "X",
    "2": "18",
    "3": "236",
    "4": "article test2",
    "5": "4",
    "6": "2015-06-18",
    "7": "2015-06-23",
    "8": "30",
    "9": "10",
    "nom": "Monsieur",
    "prenom": "X",
    "id_promotion": "18",
    "id_commercant": "236",
    "article": "article test2",
    "rubrique": "4",
    "date_debut": "2015-06-18",
    "date_fin": "2015-06-23",
    "prix_origine": "30",
    "prix_promotion": "10"
}

]

MY PROBLEM : I'm then trying to get the information I want through this script :

 $(document).ready(function (){
$.getJSON("newsfeed.php", function(result){
    $.each(result, function(i, field){
        $("#news").html(field.nom + " " + field.prenom + " vous propose " + field.article + " à " + field.prix_origine + "€ au lieu de " + field.prix_promotion + "€ ");
        console.log(field);
    });
  });
});

It results in showing the second array, but I don't know how I can chose the array I want to use. If someone has any informations in order to help me, I would really appreciate.

Answer 1

html() function removes the current contents of the HTML element, and replaces it with the value passed. So effectively, you are rewriting the previous value on every iteration. That is why, you will always get the last value of the array in the output. You may want to use the append() function instead if you want to show all values :

    $.each(result, function(i, field){
        $("#news").append("<p>"+field.nom + " " + field.prenom + " vous propose " + field.article + " à " + field.prix_origine + "€ au lieu de " + field.prix_promotion + "€ "+"</p>");
        console.log(field);
    });
});

Answer 2

Try using as

htmldata = '';
$.each(result, function(key){
        htmldata += result[key].nom + " " + result[key].prenom + " vous propose " + result[key].article + " à " + result[key].prix_origine + "€ au lieu de " + result[key].prix_promotion + "€ ";
});
$("#news").html(htmldata);