JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div id="broken" data-args="['first', 'second', 'third']"></div>
<div id="fixed" data-args='["first", "second", "third"]'></div>

<div>
    Broken: 
    <span id="broken_results"></span>
</div>
<div>
    Fixed: 
    <span id="fixed_results"></span>
</div>

JavaScript

$(function() {
  // can't parse the JSON so it treats args like a string
  // hence the first element is the open bracket [
  $('#broken_results').text($('#broken').data('args')[0]);
 
  // now the args data-attribute is valid JSON so jQuery can parse
  // it into an array. Now the first element is the string "first"
  $('#fixed_results').text($('#fixed').data('args')[0]);
});