How to set php array to html element data attribute as javascript array?

Asked Nov 14 '18 at 14:18

Active Nov 14 '18 at 14:18

Viewed 222 times

I have custom array in php:

$tags = [
    'portfolio',
    'material',
    'corporate'
];

How I can paste this array as javascript array in HTML element:

<div id="template" data-tags='["portfolio", "material", "corporate"]'></div>

I must do this task in php file and return to view.

I tired:

$result = "";
foreach ($tags as $tag) {
    $result .= '"'.$tag.'",';
}
$result = '<div class="getTags" style="display:none;" data-tags=\'['.$result.']\'></div>'; 
return $result;

But here data tags type not an array, it's string. How I can solve this problem?

asked Nov 14 '18 at 14:18

Andreas Hunter

4,504
11
65
125

Have you looked at [json_encode()](http://php.net/manual/en/function.json-encode.php) – Patrick Q Nov 14 '18 at 14:21
Try to serialize array (you can use `json_encode()` function) and add it to client side. – Oleg Nurutdinov Nov 14 '18 at 14:22
You can create a JSON string from the array in PHP and parse it in JavaScript: `[...document.querySelectorAll('.getTags')].map(el=>[el,JSON.parse(el.getAttribute('data-tags'))])` – HMR Nov 14 '18 at 14:22
@OlegNurutdinov Serializing is not the same as JSON-encoding – Patrick Q Nov 14 '18 at 14:23
@PatrickQ thanks, of course, I make an error.) – Oleg Nurutdinov Nov 14 '18 at 14:26
Thanks for answers for all. – Andreas Hunter Nov 14 '18 at 14:35

How to set php array to html element data attribute as javascript array?

0 Answers0