Loop Through json_encoded PHP Array in JavaScript

Question

I am having an issue with looping through an array that was passed from PHP through an Ajax request.

For some reason my javascript thinks that either every character is a part of the array or my response variable is just being passed as a string.

Here is my javascript:

<script>        
    $(function() {
        $.ajax({
            url: "/dev/editButton/get_names.php",
            success: function(response) {
                console.log(response);
            }
        });
    });
</script>

And here is my PHP:

<?php
include '../portfolio/libraries/settings.php';

$connect = mysqli_connect($HOST, $DB_USER, $DB_PASS, $DATABASE);
$query = "SELECT * FROM AUTH_User";
$result = mysqli_query($connect, $query);

$names = array(); 

while ($row = mysqli_fetch_array($result)) {
    array_push($names, $row['FirstName']." ".$row['LastName']);
}

echo json_encode($names);
?>

The response that I get looks like this:

["Test Person","Test2 Person"]

However, if I loop through this using javascript or just print out response[0] I get each character as part of the array. The first element would be [, next would be ", etc.

I would like Test Person to be one element and Test2 Person to be another.

Does anybody know what I am doing wrong? Thanks!

Answer 1

You need to use JSON.parse on the response. Wihtout calling that function you are just getting the index of characters in the JavaScript string.

 var resultArray = JSON.parse(response);
 resultArray[0];   //Should Be "test Person"

Answer 2

The result of the .ajax method is interpreted according to the Content-Type header of the response. If it is incorrect or not specified, the response variable will contain the raw json code as a string.

So one solution is change the PHP code by adding this line:

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

Docs:

The type of pre-processing depends by default upon the Content-Type of the response, but can be set explicitly using the dataType option. If the dataType option is provided, the Content-Type header of the response will be disregarded.

You can parse that text to an object, or you can let JQuery do that for you by specifying a datatype in the call. The response parameter will then hold the object instead of the raw json string.

Docs:

If json is specified, the response is parsed using jQuery.parseJSON before being passed, as an object, to the success handler. The parsed JSON object is made available through the responseJSON property of the jqXHR object.

$(function() {
    $.ajax({
        url: "/dev/editButton/get_names.php",
        datatype: "json",
        success: function(response) {
            console.log(response);
        }
    });
});

Answer 3

In this particular situation, you can use

        success: function(response) {
            response = eval(response);
            console.log(response);
        }

But this is bad practice.

Really the best solution here is to modify your ajax call as follow:

   $(function() {
    $.ajax({
        url: "/dev/editButton/get_names.php",
        datatype: 'json',
        success: function(response) {
            console.log(response);
        }
    });
});

The specified datatype, will request the returned data to be json, and the jquery will automatically parse it to a javascript object.

Answer 4

You must parse JSON to array. You can do this using the following code:

var arr = $.parseJSON(response);

Now arr[0] should be "Test Person".

Answer 5

You can do it the hard way, or this way:

First, you need to specify the return type for AJAX.

$(function() {
    $.ajax({
        url: "/dev/editButton/get_names.php",
        dataType: "json",
        success: function(response) {
            console.log(response);
        }
    });
});

Alternatively, you could do it this way:

$(function() {
    $.getJSON("/dev/editButton/get_names.php", function(response) {
        console.log(response);
    });
});

For this to work, you will need to specify the HTML headers accordingly in PHP:

<?php
include '../portfolio/libraries/settings.php';

$connect = mysqli_connect($HOST, $DB_USER, $DB_PASS, $DATABASE);
$query = "SELECT * FROM AUTH_User";
$result = mysqli_query($connect, $query);

$names = array(); 

while ($row = mysqli_fetch_array($result)) {
    array_push($names, $row['FirstName']." ".$row['LastName']);
}

header("Content-Type: application/json");
echo json_encode($names);
exit();
?>

The exit(); is just for safety so you wouldn't ruin the valid JSON format.

JSON stands for JavaScript Object Notation, so you should not have to do anything complicated there. Here is a simple loop you could use for example:

for(var i in response) {
    console.log(response[i]);
}

Alternatively, if the response is not an array but an object with properties, you could loop through the object properties by getting the right keys first:

var objKeys = Object.keys(response);
for(var i in objKeys) {
    var key = objKeys[i];
    console.log(response[key]);
}

I hope this helps!