Create JavaScript array out of HTML

Question

I am iterating over an array to display some data, and at the same time creating another array which will be used to create JSON and then assign it to a JavaScript variable.

<?php
$otherStuff=array();
foreach($myArray AS $row)
{
    echo("<tr data-id='{$row['id']}'><td>{$row['firstname']}</td><td>{$row['firstname']}</td></tr>");
    $otherStuff[$row['id']]=$row['otherStuff'];                
}
echo('<script type="text/javascript">var otherStuff='.json_encode($otherStuff).';</script>');
?>

This just doesn't seem like a very clean way to do this task. Instead I am wondering if it would be better to create some hidden HTML, and then clientside parse it to create the desired JavaScript variable.

Is doing so possible? Is it a good idea, or should I do something else? If possible, how?

Thank you

Personally, I like the way you're doing it currently and I wouldn't change it. It's the way that requires the least effort and is relatively clean and understandable. — GravityScore
– GravityScore, Commented Oct 12, 2014 at 15:33
If the otherStuff is related the HTML row's data, why not use data- attributes to store it in relation with the tr element? — Jared Farrish
– Jared Farrish, Commented Oct 12, 2014 at 15:35
@JaredFarrish I like the idea, but is it possible being an array? — user1032531
– user1032531, Commented Oct 12, 2014 at 15:37
Yes, of course. data-other-stuff='{"stuff":"goes heres"}' That can be turned into an array the same as what you have. Note, though, that you need to encode it in PHP so the double-quotes aren't a problem. — Jared Farrish
– Jared Farrish, Commented Oct 12, 2014 at 15:39

Jared Farrish · Accepted Answer · 2014-10-12 15:58:57Z

1

Here is a rudimentary example:

$arr = array('stuff' => 'goes here');

echo "<div data-other-stuff='" . htmlspecialchars(json_encode($arr)) . "'></div>";

Produces:

<div data-other-stuff='{&quot;stuff&quot;:&quot;goes here&quot;}'></div>

http://codepad.org/Bq5GZcVS

$('div').each(function ea(){
    // Some browsers/versions do not support JSON.parse(), try json2.js
    var data = $(this).attr('data-other-stuff'),
        _data = JSON.parse(data);

    console.log(data, _data);
});

Produces (in the console):

'{"stuff":"goes here"}' Object {stuff: "goes here"}

(The first is really a string, but I added the single quotes to make that obvious.)

http://jsfiddle.net/0mv44jvd/1

Just like any JSON-encoded, you have to turn it into an array or object once you consume it. But this works all the same.

edited Oct 12, 2014 at 15:58

answered Oct 12, 2014 at 15:49

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

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

3 Comments

user1032531 Over a year ago

So, eval is needed? The data is safe, so it isn't a problem. Just paranoid from all those people saying "eval is evil! Never use is!"

Jared Farrish Over a year ago

See this answer, I just didn't want to bother with JSON.parse(). I use the library recommended, though, which uses eval() as a shim.

user1032531 Over a year ago

Seems like parsing is automatic in jQuery's data() method. See jsfiddle.net/0mv44jvd/2

Collectives™ on Stack Overflow

Create JavaScript array out of HTML

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related