Manipulating JSON from PHP in Javascript

Question

I am currently using HTML/PHP to get a JSON file from an API. I then want to manipulate the JSON file in JavaScript and display certain elements of the JSON on the page. I can see that the JSON is being bought back correctly, but I cannot save the JSON into a JavaScript variable after this. My code is below.

<?php

$pokemon = $_POST['pokemon'];
$siteaddressAPI = "http://pokeapi.co/api/v1/game/" . $pokemon . "/";
$data = file_get_contents($siteaddressAPI);

echo($data)

?>

<!DOCTYPE HTML>
<html>
<body>
<br><br><br><br><br><br><br>
<p>Created: <span id="created"></span><br></p> 
    <script>
        var txt = <?php echo ($data); ?>;
        obj = JSON.parse(txt);
        document.write("<p>Created: " + obj.created + "</p>");
    </script>
</body>
</html>

EDIT: I have just noticed my lack of ' ' around my txt variable, this has now been fixed but the issue remains.

You don’t need JSON.parse, remove it. (And rename your variable txt to obj in the first place, because that is what you are getting when your JSON code gets interpreted by the JS engine.) — C3roe
– C3roe, Commented Mar 13, 2014 at 17:16
Thats great, thank you! the main issue I have now is that if I document.write or document.getElementById to output certain information in the JSON file, it all comes out as 'undefined'. — Dr R Dizzle
– Dr R Dizzle, Commented Mar 13, 2014 at 17:32

Ruan Mendes · Accepted Answer · 2014-03-13 17:27:43Z

2

An example of the output of the API is:

{"created": "2013-11-03T19:31:10.975452", "generation": 1, "id": 1, "modified": "2013-11-03T19:31:10.975393", "name": "Red(jpn)", "release_year": 1996, "resource_uri": "/api/v1/game/1/"}

You don’t need JSON.parse, remove it. (And rename your variable txt to obj in the first place, because that is what you are getting when your JSON code gets interpreted by the JS engine.)

var obj = <?php echo ($data); ?>;
document.write("<p>Created: " + obj.created + "</p>");

An example is shown with the console below:

edited Mar 13, 2014 at 17:27

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

answered Mar 13, 2014 at 17:20

Dave Chen

11k8 gold badges42 silver badges72 bronze badges

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

5 Comments

Dr R Dizzle Over a year ago

That's great, thank you! the main issue I have now is that if I document.write or document.getElementById to output certain information in the JSON file, it all comes out as 'undefined'.

Dave Chen Over a year ago

So the exact line document.write("<p>Created: " + obj.created + "</p>"); returns Created: undefined? Did you make sure that you didn't have the JSON.parse?

Dr R Dizzle Over a year ago

The JSON.parse is gone now. the new line is document.write("<p>Created: " + obj.created + "</p>");.

Dave Chen Over a year ago

Can you provide the value of $pokemon? Also make sure the previous line is var obj = <?php echo $data; ?>;, Juan Mendes corrected my typo.

Dr R Dizzle Over a year ago

The value of Pokemon is any number between 1 - 15. After removing he brackets and apostrophes from var obj = '<?php echo ($data;) ?>'; it now works, and is successfully allowing me to display the JSON data on screen the way I want. Thank you very much.

Collectives™ on Stack Overflow

Manipulating JSON from PHP in Javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related