Echoing Variables within a JSON array

Question

I'm trying to access and display a variable within a json object on my page. Can anyone tell me why the variable gets displayed three times?

my_array.php

<?php

$my_data=array(name=>"john",age=>"30", city=>"copenhagen");

// sending output
header('Content-Type: text/json');
echo json_encode($my_data,true);
?>

My_page.php

<script>
$(document).ready(function() {
  $("button").click(function() {
    $.getJSON("my_array.php", function(data) {
      $.each(data, function(key) {
        $("#showdata").append(data.city);
      });
    });
  });
});
</script>

//Show the data further down the page.

<div id="showdata"></div>

This displays

copenhagencopenhagencopenhagen

Its: header("Content-Type: application/json");

Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez

2016-03-20 19:07:55 +00:00
Commented Mar 20, 2016 at 19:07 — Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez, Commented Mar 20, 2016 at 19:07
What do you want it to display?

Matt
– Matt

2016-03-20 19:10:56 +00:00
Commented Mar 20, 2016 at 19:10 — Matt
– Matt, Commented Mar 20, 2016 at 19:10
Its displays three times because you have three keys.

Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez

2016-03-20 19:11:07 +00:00
Commented Mar 20, 2016 at 19:11 — Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez, Commented Mar 20, 2016 at 19:11

Jigar Vyas · Accepted Answer · 2016-03-20 19:17:48Z

1

That's because you're iterating over 'each' data item from the json response that you receive and there are 3 key=>value pairs in my_array.php

Removing "$.each(data, function(key) {} " will return the value 'city' only once

    $(document).ready(function(){
        $("button").click(function(){
            $.getJSON("my_array.php",function(data){
                $("#showdata").append(data.city);
            });
        });
    });

answered Mar 20, 2016 at 19:17

Jigar Vyas

686 bronze badges

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

Comments

yusufshakeel · Accepted Answer · 2016-03-20 19:19:18Z

1

use this

my_array.php

<?php

$my_data = array(
    name    =>  "john",
    age     =>  "30",
    city    =>  "copenhagen"
);

// sending output
header('Content-Type: application/json');
echo json_encode($my_data, true);

?>

My_page.php

<div id="showdata"></div>
<button>Click Me!</button>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(e){
        $.getJSON("test.php", function(data){
            console.log(data);
            $("#showdata").append(data.city);
        });
    });
});
</script>

this will give you only one copenhagen.

hope it helps...

answered Mar 20, 2016 at 19:19

yusufshakeel

4493 gold badges11 silver badges22 bronze badges

Comments

Dimitrios Desyllas · Accepted Answer · 2016-03-20 19:15:50Z

0

First things first:

Set either:

header("Content-Type: application/json");

Above:

echo json_encode($my_data,true);

On your php file.

Or use the following snippet on your javascript:

$.getJSON("my_array.php",function(data)
{
  data=JSON.stringify(data);
  $.each(data, function(key) 
  {
    $("#showdata").append(data.city);
  });
});

Furthermore either in both ways above the returned data is an Object so in order to return correctly on your php file the data must be:

$my_data=array(array(name=>"john",age=>"30", city=>"copenhagen"));

Note: Associative arrays on php's json_encode turned into Objects. Non associative arrays on json_encode still remain an array

answered Mar 20, 2016 at 19:15

Dimitrios Desyllas

10.4k17 gold badges89 silver badges203 bronze badges

Comments

Ulrich · Accepted Answer · 2016-03-20 19:18:30Z

0

Im guessing because you have got three buttons on the page and the $.each takes the selector try:

$("button").click(function(){
  $.getJSON("my_array.php",function(data){
    $("#showdata").append(data.city);
  });
});

answered Mar 20, 2016 at 19:18

Ulrich

1

Comments

Rubén Cougil · Accepted Answer · 2016-03-20 19:20:48Z

0

you're iterating 3 times because of the three keys you have within the JSON object,

$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    console.log( "key + " " + val" );
  });

take a look at the JQuery documentation for further info.

http://api.jquery.com/jquery.getjson/

answered Mar 20, 2016 at 19:20

Rubén Cougil

531 silver badge10 bronze badges

Collectives™ on Stack Overflow

Echoing Variables within a JSON array

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related