Display PHP JSON data with jQuery/AJAX

Question

So I have this on the PHP side:

//enclosed in for loop start
$titleArray[] = $title;
$idsArray[] = $id;
//enclosed in for loop end

After the loop runs, the arrays are populated, here is a var_dump showing that. And then we json encode it and exit, sending it as a response for jQuery to handle.

var_dump($titleArray);
array(2) {
  [0]=>
  string(2) "T1"
  [1]=>
  string(2) "T2"
}

var_dump($idsArray);
array(2) {
  [0]=>
  string(2) "I1"
  [1]=>
  string(2) "I2"
}

$output = array('success' => true, 'type' => 'valid', 'titles' => ''.$titleArray.'', 'ids' => ''.$idsArray.'');
echo json_encode($output);
exit();

Here is where I run into the issue. I can't seem to access those arrays (titles/ids) anymore. The response is:

{"type":"valid","titles":"Array","ids":"Array"}

Here is the post success area to handle the response:

success: function(output) {
             var x = $.parseJSON(output);
                 if(x.type=='valid'){
                     $.each(x.titles, function(k, v) {
                         $("#output-area").append('<div id="'+v.ids+'" class="title">Title: '+v.titles+'</div>');
                     });
                 }
         }

2 new divs should be appended at this point, as there are 2 items in the arrays. Instead, I get 5 newly appended divs with undefined as the v.ids and v.titles values. How can I get the correct and desired output in this scenario?

Deval Shah · Accepted Answer · 2013-05-22 20:11:19Z

1

Basically you have pass Array to json_encode()

array('success' => true, 'type' => 'valid', 'titles' => $titleArray, 'ids' => $idsArray );

answered May 22, 2013 at 20:11

Deval Shah

1,1048 silver badges22 bronze badges

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

1 Comment

Wonka Over a year ago

By taking off the commas around the $titleArray & $idsArray, I now get 2 divs instead of 5, as expected. However, the values are still undefined in the outputted divs.

Faishal · Accepted Answer · 2013-05-22 20:32:13Z

1

Create a single array

$data[] = array('id' => $id , 'title' => $title );
$output = array('success' => true, 'type' => 'valid', 'data' => $data );
echo json_encode($output);
exit();

in javascript

success: function(output) {
             var x = $.parseJSON(output);
                 if(x.type=='valid'){
                     $.each(x.data, function(k, v) {
                         $("#output-area").append('<div id="'+v.id+'" class="title">Title: '+v.title+'</div>');
                     });
                 }
         }

answered May 22, 2013 at 20:32

Faishal

1,4931 gold badge14 silver badges23 bronze badges

7 Comments

Wonka Over a year ago

Really close! This fixes the undefined variable names, So far the only issue left is the output is all in one div like this <div id="T1,T2" class="title">Title: I1,I2</div> instead of outputting 2 unique divs

Wonka Over a year ago

The jquery you posted in the comments does not work. Can you show what it would look like in your post on the PHP side? I am basically trying to remove the commas found here: <div id="T1,T2" class="title">Title: I1,I2</div> and creat a div for each.

Faishal Over a year ago

var sep = '';     var ids ='';      var titles='';     $.each(x.data, function(k, v) {          ids += sep + v.id;         titles += sep + v.title;          sep = ","      });      $("#output-area").append('<div id="'+ids+'" class="title">Title: '+titles+'</div>');

Wonka Over a year ago

hmmm.. I still get the same exact output with the comma and 1 div instead of 2: <div id="T1,T2" class="title">Title: I1,I2</div>

Faishal Over a year ago

\\Before Loop $sep =""; \\in loop ` $ids .= $sep . $id; $titles .= $sep . $title;` \\ display

$output = array('success' => true, 'type' => 'valid', 'ids' => $ids,'titles' => $titles ); echo json_encode($output); exit();

\\and js ` success: function(output) { var x = $.parseJSON(output); if(x.type=='valid'){ $("#output-area").append('<div id="'+x.ids+'" class="title">Title: '+x.titles+'</div>'); } } `

|

Collectives™ on Stack Overflow

Display PHP JSON data with jQuery/AJAX

2 Answers 2

1 Comment

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Related