Get JSON object from PHP using javascript

[Andrei_Birsan]

Hello guys. This might be a silly question.
Let’s say I have an array in my PHP file that I encoded to a valid JSON object ready to be passed to my script where I will loop over this.
I’m just a bit confused how to get this JSON object from my PHP file to Javascript
Can someone enlighten me? Thanks

$array = [];
    $array[0][0] = 1;
    $array[0][1] = 2;
    $array[0][2] = 3;
    $array[0][3] = 4;
    $array[0][4] = 5;

    $array[1][0] = 1;
    $array[1][1] = 2;
    $array[1][2] = 3;
    $array[1][3] = 4;
    $array[1][4] = 5;

    json_encode($array);

$(document).ready(function(){

    $("#button").click(function(){
        //get json object and start to loop here.
    });
    
});

[m3g4p0p]

You can just echo it like any other server response; say your PHP file is called get-array.php

<?php

$array = [];
$array[0][0] = 1;
$array[0][1] = 2;
$array[0][2] = 3;
$array[0][3] = 4;
$array[0][4] = 5;

$array[1][0] = 1;
$array[1][1] = 2;
$array[1][2] = 3;
$array[1][3] = 4;
$array[1][4] = 5;

echo json_encode($array);

Then you can request the data with JS like

$.get('get-array.php', function (data) {
  // Do something with the data
})

It works the same way like you request a regular page, just that the response is in JSON format rather than HTML. And since you’re using jQuery, it can guess the format and parse the response accordingly (but you can of course also specify the data type explicitly).

[Andrei_Birsan]

Well, if I do this and I echo the data in the console this shows all the html on that page. I just need that array.
So basically the response body is HTML , because I get an error: Unexpected token < in JSON at position 0

For example I found this solution that I can have in my html file But i’m guessing there might be a better solution to get the JSON object straight in javascript.

var ar = <?php echo json_encode($ar) ?>;

[Mittineague]

It may be easier to assign the JSON string to a variable and echo that in the function. Else I think you may need to set the HTTP header to the json content type. Either way, you need to assign the PHP to JavaScript somewhere.

[Andres_Vaquero]

You may need a separate PHP script file to retrieve the data via AJAX so that it is not polluted with HTML or anything else that is not the JSON, even PHP notices will pollute the response. Then once you have a clean JSON generated through json_encode or else via PHP and you get it in the AJAX text response you can do the following in JS:

var myData = JSON.parse(responseText);

Hope that helps…

[MartinMuzatko]

From the data you showed, I can’t tell what the actual use case is. however, there are several ways to get data from the server to the client (php to js, or backend to front-end, whatever you want to call it).

Usually you want to get the data using AJAX from pure data endpoints (URLS that only deliver the raw data)

This requires that you have a good understanding of how you want to create your information architecture.
Of course, this is overkill for a simple testing-around project. However, if you have multiple situations like this, you should start thinking about a centralized approach to retrieving, fetching and using data.

PHP enables many front-end developers to also take care about the backend templates. And thus, also take care about the data that comes with it. If you are responsible for both front, and back-end but have little understanding of the underlying system, you are most often doomed to get stuck in this process of passing data from server to client.

If you have the freedom to create your own API, I recommend to get started with ProcessWire for PHP (I created a test API based on it).