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.

Of course your getting the second array, you're overwriting it because you are looping with $.each — Daan
– Daan, Commented Jun 18, 2015 at 12:42
Put this in your each: if(i == 0) { //first array } else { //second array } — Daan
– Daan, Commented Jun 18, 2015 at 12:47
The problem with your solution is I will only be able to use 2 arrays, or maybe I'm wrong ? What if tomorrow, I decide to add 1, 2 or more news to show, — Rameleu
– Rameleu, Commented Jun 18, 2015 at 12:49
Then you need to mention that in your question, have a look at Uchiha's answer. — Daan
– Daan, Commented Jun 18, 2015 at 12:50

Narendrasingh Sisodia · Accepted Answer · 2015-06-18 12:46:46Z

3

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

edited Jun 18, 2015 at 12:46

answered Jun 18, 2015 at 12:42

Narendrasingh Sisodia

21.4k6 gold badges51 silver badges54 bronze badges

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

4 Comments

Daan Over a year ago

Because field contains the object with nom etc.

Narendrasingh Sisodia Over a year ago

Check my updated result @Rameleu. Sorry I've been in too much hurry to post it as an answer

Rameleu Over a year ago

So if I want to show the first array, I have to replace key by an int am I right ?

Narendrasingh Sisodia Over a year ago

Yes you have to replace your key by i and its going to work for you

johngreen · Accepted Answer · 2015-06-18 12:59:48Z

0

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

answered Jun 18, 2015 at 12:59

johngreen

2,7545 gold badges32 silver badges49 bronze badges

1 Comment

Rameleu Over a year ago

Thank you for this, I knew but I was using html() in order to see if the javascript was launched or if there was a problem. Anyway thank you for this answer !

Collectives™ on Stack Overflow

jQuery / JSON multiple arrays

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related