Populate JS array from returned PHP/JSON

Question

I have a JSON encoded array, to which i am returning to an AJAX request.

I need to place the JSON array into a JS Array so i can cycle through each array of data to perform an action.

Q. How do i place the JSON array contents into a JS array efficiently?

The PHP/JSON Returned to the AJAX

$sql = 'SELECT *
     FROM btn_color_presets
    ';

$result = mysqli_query($sql);

$array = array(); // 

while($row = mysql_fetch_assoc($result)) // 
{
     $array[] = $row;
     $index++;
}

header("Content-type: application/json");
echo json_encode($array);

Sarfraz · Accepted Answer · 2014-07-13 19:39:01Z

2

You can use JSON.parse function to do so:

var myObject = JSON.parse(response_from_php);

// loop over each item
for (var i in myObject) {
    if (myObject.hasOwnProperty(i)) {
       console.log(myObject[i]);
    }
}

You can also use jQuery.parseJSON() if you are using jQuery, however jQuery also uses same function under the hood as priority if available.

edited Jul 13, 2014 at 19:39

answered Jul 13, 2014 at 19:26

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

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

2 Comments

Derple Over a year ago

Thanks for the response. so, to clarify i do not require console log i can do my actions there in place of that.. correct? I am appending css to the document with the contents of the array.

Sarfraz Over a year ago

@StuartWickenden: Yes you are right, console.log is used here as an example to see result of each time but you can replace as per your needs.

ex3v · Accepted Answer · 2014-07-13 20:01:53Z

Adding to Safraz answer:

If you're using jQuery, there's another way to do that. Simply add json as last parameter to your ajax calls. It tells jQuery that some json content will be returned, so success function get already parsed json.

Below example shows you simple way to achieve this. There's simple json property accessing (result.message), as well as each loop that iterates through whole array/object. If you will return more structurized json, containing list of object, you can access it inside each loop calling value.objectfield.

Example:

//Assuming, that your `json` looks like this:
{
    message: 'Hello!',
    result: 1
}

$.post(
    'example.com',
    {data1: 1, data2: 2},
    function(response){
        console.log(response.message) //prints 'hello'
        console.log(response.result) //prints '1'

        //iterate throught every field in json:
        $(response).each(function(index, value){
            console.log("key: " + index + " value: " + value); 
        });
    },
    'json'
)

Collectives™ on Stack Overflow

Populate JS array from returned PHP/JSON

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related