Javascript json_encode > JSON.parse() array

Question

I the following PHP code:

echo "<img src='../images/edit.png' onclick='showEditDiv(" . json_encode($row) . ");'>";

Here is the HTML result:

<img src='../images/edit.png' onclick='showEditDiv({"ID":"2","NAME":"John Smith","EMAIL":"[email protected]"});'>

And here is the Javascript code:

function showEditDiv(data) {
  alert(data);
  data = JSON.parse(data);
  alert(data);
  for (i=0; i< data.length; i++){ 
    alert(data[i]);
  };
}

The problem is I'm not getting the desired array in the JS parameter. The first alert shows "[object Object]" and that's all, no more alerts. Where is the problem? My code is based on the examples I found here. All I want is to pass an array to JS function, which is in a separated .js file. I don't want to use JQuery, prefer native JS.

Answer 1

You aren't passing JSON to the function (JSON would be a string, hence ending/beginning with quotes). What you're passing is a JavaScript object literal. See the difference:

Object literal

{"ID":"2","NAME":"John Smith","EMAIL":"[email protected]"}

JSON string

"{\"ID\":\"2\",\"NAME\":\"John Smith\",\"EMAIL\":\"[email protected]\"}\"
// or, easier than escaping all those quotes..
'{"ID":"2","NAME":"John Smith","EMAIL":"[email protected]"}'

Of course, for your purposes, the object literal may be easier to work with. In that case you just need to remove the JSON.parse from your JavaScript code:

function showEditDiv(data) {
    // The below won't work unless you change your input data to a
    // JS array literal..
    /* for (i=0; i< data.length; i++){ 
        alert(data[i]);
    }; */

    // ..but you can do this (though it's risky to iterate through keys
    // on an object without at least using HasOwnProperty)
    for (var key in data) {
        alert(data[key]);
    }
}