CODEWITHSUNDEEP
javascriptphphtmlarrays
tcxbalage
tcxbalage

Reputation: 726

Javascript json_encode > JSON.parse() array

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.

Upvotes: 4

Views: 95063

Answers (5)

Mika Lindqvist
Mika Lindqvist

Reputation: 80

You will need to use second parameter of JSON.parse function to convert the JSON object to associative array... It is supposed to be a callback that gets the property name and value as parameters.

This is because associative arrays in JavaScript are of type "Object", which is parent type of "Array".

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#using_the_reviver_parameter for examples

Upvotes: 0

Chris Hayes
Chris Hayes

Reputation: 12050

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]);
    }
}

Upvotes: 10

Ringo
Ringo

Reputation: 3965

{"ID":"2","NAME":"John Smith","EMAIL":"[email protected]"} is already a json.

That's why your alert is [object Object]. Also It's not an array for loop. You can get it's data by this way:

function showEditDiv(data) {
  alert(data);
  alert(data.ID);
  alert(data.NAME); // etc..
}

If you want an array, here's the example.

Upvotes: 0

Neikos
Neikos

Reputation: 1980

JSON is a subset of Javascript. Which means that if used appropriately it is valid javascript as well.

In this case you are effectively putting through an object, which is also what your alert has told you. The JSON.parse should then error.

If you want to pass an array you have to change your data source. (Although from the looks of it, an array is not required.)

Upvotes: 0

Amadan
Amadan

Reputation: 198436

All I want is to pass an array to JS function

That's an object in JS, not an array. (PHP nomenclature is a bit weird.) And you have successfully passed it. However, when you convert an object into a string (which is what alert has to do), it shows up as [object Object]. If you want the string representation, convert it back into a string:

alert(JSON.stringify(data));

You don't need to JSON.parse it, since it already is an object - you have inserted it as a literal from PHP, not as a string. In fact, running JSON.parse in your code should cause an error, which is why no more alerts - code stops, complaining about bad taste in JSON.parse's mouth.

Upvotes: 5

Related Questions