4

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.

Improve this question
2
  • 2
    What you have is not an array. It is an object literal. What exactly do you want Commented Dec 26, 2013 at 1:45
  • @PSL: I believe OP is using "array" in PHP sense (hash-array-bag-thingy). Commented Dec 26, 2013 at 1:47

5 Answers 5

Reset to default
10

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]);
    }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

What is a JSON string? You mean an escaped string here. Or do you call &lt;span&gt; an html string?
@Neikos: JSON is always a string. JS object is almost the same thing, but as a structure in JavaScript. {} is (an empty) JavaScript object; "{}" is JSON data format corresponding to it.
No. { "data": "value" } is both JSON and JS.
@Neikos Context is obviously important and you're arguing pointless semantics here. What you just posted is JSON, but it's not JSON within JavaScript code because it isn't a string.
Furthermore, JSON is always a string because JSON is defined in terms of Unicode encoding. What you posted isn't JSON if you paste it into a JavaScript script, it is only an object literal.
|
5

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.

Improve this answer

Comments

0

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.)

Improve this answer

Comments

0 
{"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.

Improve this answer

3 Comments

Thanks, this is a useful info! The only problem I want an array, not an object.
So what do you want when use "alert(data[i]);"? The ID with value equa 2? Or the whole object with all of info above?
Well that is a good question :) I'm not familiar with JS, I need a same associative array than I have in the PHP, therefore as you pointed out, my code is completely wrong.
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.