unable to parse json using jquery after ajax call

Question

this is my php script

<?php

$wishes_array["wishes_text"] = null;
$wishes_array["total"] = null;
$count = 0;
// wishes has all records
if(!is_null($wishes))
{
    foreach($wishes as $wish)
    {
        if($wish->text != null)
        {
             $wishes_array["wishes_text"][$count] = html_escape($wish->text);
             $count++;
        }
     }
     $wishes_array["total"] = sizeof($wishes);
     echo json_encode($wishes_array);
}
?>

background

a user sends his wishes using a button, but he has an option to send some message with his wish, suppose person A just sent wish, but person B sent wish with text "happy birthday", person C sent wish with text "have a great birthday"

now using this array we have array which tells total number of wishes recieved(with and without wish text) and wishes the text of the wishes sent by person.

problem

unable to use parse the json using jquery, here is what i've done and it return undefined

var total_start = '<div style="padding: 3px;margin: 10px auto;"><i class="fa fa-heart" style="background: #e53935; color: #fff;padding: 5px;border-radius: 50%;"></i> ';
var total_end = '</div>';
var startString = '<div style="padding: 3px;margin: 10px auto;"><i class="fa fa-heart" style="background: #e53935; color: #fff;padding: 5px;border-radius: 50%;"></i>';
var endSting = '</div>';
var wishes = '';
var count = 0;
if(data["wishes_text"] != null){
     $.each(data, function(index, element) {
         wishes += startString;
         wishes += ' ' + data["wishes_text"][count];
         wishes += endSting;
         count++;
     });
 }
 var total = "";
 if(data["total"] == 1)
 {
     total = total_start + data["total"] + ' person wished' + total_end;
 }
 else
 {
     total = total_start + data["total"] + ' people wished' + total_end;
 }
 $('#wish_div').html(total + wishes);

ajax response json

{"wishes_text":["wish 1","wish 2"],"total":3}

Answer 1

The issue in your code is simply that you're attempting to iterate through data instead of the wishes_text array contained within data . Note that you can also tidy up the logic slightly. Try this:

var total = '<div style="padding: 3px;margin: 10px auto;"><i class="fa fa-heart" style="background: #e53935; color: #fff;padding: 5px;border-radius: 50%;"></i>' + data["total"] + ' ' + (data.total == 1 ? 'person' : 'people') + ' wished</div>';
var startString = '<div style="padding: 3px;margin: 10px auto;"><i class="fa fa-heart" style="background: #e53935; color: #fff;padding: 5px;border-radius: 50%;"></i>';
var endSting = '</div>';
var wishes = '';

if (data.wishes_text != null) {
    $.each(data.wishes_text, function(index, element) {
        wishes += startString + ' ' + data["wishes_text"][index] + endSting;
    });
}
$('#wish_div').html(total + wishes);

Working example

I'd also suggest you look in to using stylesheets and classes over inline styling, and also a templating library as the large chunks of HTML in the JS code are on the limit of being 'too big', from a best practice point of view.