Set Javascript Array in HTML

Question

I have the following code which is generated in PHP:

<div id='container1' data-history="[["test", "test title", "", []]]">

I wish to have this accessible in javascript but when I use console.log(history[0]) it outputs '[' so its treating the array as a string.

Is there a way to have it so that javascript can read it as an array?

My PHP code is as follows (i removed the slashes and '' around the array)

echo '<div id="container1" data-history=[[0]["test", "test title", "", []]] data-current-url="'.$url.'">';

how are you doing `echo` for data-history attribute value from php? — Ravi Dhoriya ツ, Apr 18 '14 at 07:29
`echo` is fine, but how are you doing that for array? plz provide php code — Ravi Dhoriya ツ, Apr 18 '14 at 07:31
check dis, for that you need to make your array valid `json`, http://stackoverflow.com/questions/13272406/javascript-string-to-array-conversion — Ravi Dhoriya ツ, Apr 18 '14 at 07:33
I updated the array bit but now it gives me: SyntaxError: JSON.parse: unexpected keyword — Nuvolari, Apr 18 '14 at 07:52
Updated again it gives me this error: SyntaxError: JSON.parse: unexpected end of data — Nuvolari, Apr 18 '14 at 07:54
@anni I have reversed your edit. Not only did it have nothing to do with "fromating", but it also introduced tags that don't seem particularly relevant. — Lightness Races in Orbit, May 02 '14 at 15:09

Quentin · Accepted Answer · 2014-04-18T07:37:13.233

1

If you removed the \ characters from it and added a , after the first array element, then it would be valid JSON and you could pass it through JSON.parse().

  <div id='container1' data-history='[[0],["test", "test title", "", []]]'></div>
  <script>
    var history = JSON.parse(document.getElementById('container1').getAttribute('data-history'));
    console.log(history);
    alert(history[1][1]);
  </script>

From a comment on another answer:

Its meant to be a multi dimensional array where index 0 contains '["test", "test title", "", []]'

You don't specify the property names in JavaScript or JSON array literal syntax. The position determines the property name.

data-history='[["test", "test title", "", []]]'>

edited Apr 18 '14 at 07:37

answered Apr 18 '14 at 07:29

Quentin

914,110
126
1,211
1,335

Ok I did that and it gives me this error: "SyntaxError: JSON.parse: unexpected end of data". My new code: data-history=[[0]["test", "test title", "", []]] – Nuvolari Apr 18 '14 at 07:31
You've removed the `'` characters from around the attribute value. Don't do that. Attribute values containing spaces must be quoted. – Quentin Apr 18 '14 at 07:32
hmm, you are also missing a comma after the first array element – Quentin Apr 18 '14 at 07:36

Alberto De Caro · Answer 2 · 2014-04-18T07:43:40.907

0

Besides the escape characters (that are to be removed), the following string is not regular JSON:

[[0]["test", "test title", "", []]]

So eventually it won't be parsed by JSON.parse(). Maybe you ment following form:

[[0, "test", "test title", "", []]]

That is correctly parsed by JSON.parse():

var dataHistory = JSON.parse('[[0, "test", "test title", "", []]]');

EDIT

As for the multidimensional array, there are several possibilities:

use the natural position of the elements:

var dataHistory = [
  ["test", "test title", "", []]    //this is the 0 element
];
var myZeroElement = dataHistory[0];

use a key, value structure:

var dataHistory = [
  {'key':'0', 'value': ["test", "test title", "", []]}
];
var myZeroElement = dataHistory[0].value;

edited Apr 18 '14 at 07:43

answered Apr 18 '14 at 07:35

Alberto De Caro

5,147
9
47
73

Its meant to be a multi dimensional array where index 0 contains '["test", "test title", "", []]' – Nuvolari Apr 18 '14 at 07:36
I've changed it to your first suggestion but it gives me this error:SyntaxError: JSON.parse: unexpected keyword – Nuvolari Apr 18 '14 at 07:51
Please post the code you use to grab the `data-history` attribute value and to parse it. – Alberto De Caro Apr 18 '14 at 08:07

Maurice Perry · Answer 3 · 2014-04-18T08:08:06.207

0

Since both javascript and php have the same two types of quotes to delimitate strings, you need to escape some of them:

echo '<div id="container1" data-history=\'[[0],["test", "test title", "", []]]\' data-current-url="'.$url.'">';

edited Apr 18 '14 at 08:08

answered Apr 18 '14 at 08:02

Maurice Perry

32,610
9
70
97

I had at the start but apparently that wasn't valid according to answers. – Nuvolari Apr 18 '14 at 08:03
Oh yes, there is a missing comma – Maurice Perry Apr 18 '14 at 08:07

YannPl · Answer 4 · 2021-11-05T14:26:55.103

This data is not valid JSON string. You can check it here: http://jsonlint.com/

In PHP use json_encode($table); to encode your array to a valid JSON string and put it in your HTML attribute.

Then use JSON.parse(history) in your JS to get the corresponding JSON object.

EDIT: Try to change your php to this:

echo '<div id="container1" data-history="[\"test\", \"test title\", \"\"]" data-current-url="'.$url.'">';

And use the JS code I supplied.

Set Javascript Array in HTML

4 Answers4