CODEWITHSUNDEEP
javascriptphpjqueryjsonajax
Source Matters
Source Matters

Reputation: 1221

Looping through JSON object with jquery not finidng indexes?

My PHP script is returning the below output according to Chrome console a json_encoded array:

{html: {achievements: [,…]}, total: 2, status: "success"}
    html: {achievements: [,…]}
        achievements: [,…]
            0: "<div class="achievement-wrapper" title="1,000 Alarms Reduced"><div class="achievement text-center" style="background-color: #e2d7eb;"><span class="achievement-text" style="color: #ffffff;"><i class="fa fa-bell-slash"></i></span></div></div>"
            1: "<div class="achievement-wrapper" title="2,000 Alarms Reduced"><div class="achievement text-center" style="background-color: #c5b0d7;"><span class="achievement-text" style="color: #ffffff;"><i class="fa fa-bell-slash"></i></span></div></div>"
    status: "success"
    total: 2

My jquery AJAX call with proper dataType of "json" looks like below:

$( json.html.achievements ).each( function() {
        console.log("Achievement: "+$(this).val() );
});

I'm having trouble looping through that json response to output the 2 different "achievements". Am I referencing the items incorrectly?

EDIT:

Not sure if it helps, but here is the "response" as shown in the Response tab of the console:

{"html":{"achievements":["<div class=\"achievement-wrapper\" title=\"1,000 Alarms Reduced\"><div class=\"achievement text-center\" style=\"background-color: #e2d7eb;\"><span class=\"achievement-text\" style=\"color: #ffffff;\"><i class=\"fa fa-bell-slash\"><\/i><\/span><\/div><\/div>","<div class=\"achievement-wrapper\" title=\"2,000 Alarms Reduced\"><div class=\"achievement text-center\" style=\"background-color: #c5b0d7;\"><span class=\"achievement-text\" style=\"color: #ffffff;\"><i class=\"fa fa-bell-slash\"><\/i><\/span><\/div><\/div>"]},"total":2,"status":"success"}

Upvotes: 1

Views: 27

Answers (2)

gantoine
gantoine

Reputation: 1275

I think this is what you want:

$.each( json.html.achievements , function(i, val) {
  $('#myDiv').append(val[i]);
});

JSFiddle

Here you can see the difference, since I added some text: https://jsfiddle.net/2pf8v0nc/20/

Upvotes: 1

charlietfl
charlietfl

Reputation: 171669

Something like this should work

$.each( json.html.achievements , function(i, html) {
        console.log(html);
        $('#someDiv').append(html);
});

Upvotes: 1

Related Questions