JSFiddle - React, Tailwind, and code Playground

HTML

<div id="locations" data-locations="{'name':'Bath','url':'/location/bath','img':'/thumb.jpg'},{'name':'Berkhamsted','url':'/location/berkhamsted','img':'/thumb.jpg'},{'name':'Bishop&rsquo;s Stortford','url':'/location/bishops-stortford','img':'/thumb.jpg'},{'name':'Cambridge','url':'/location/cambridge','img':'/thumb.jpg'},{'name':'Lymington','url':'/location/lymington','img':'/thumb.jpg'},{'name':'Manchester','url':'/location/manchester','img':'/thumb.jpg'},{'name':'Marlborough','url':'/location/marlborough','img':'/thumb.jpg'},{'name':'Newbury','url':'/location/newbury','img':'/thumb.jpg'},{'name':'Oxford','url':'/location/oxford','img':'/thumb.jpg'}"></div>

JavaScript

var testOne = $('#locations').data('locations');
var testTwo = new Array({'name':'Bath','url':'/location/bath','img':'/thumb.jpg'},{'name':'Berkhamsted','url':'/location/berkhamsted','img':'/thumb.jpg'},{'name':'Bishop&rsquo;s Stortford','url':'/location/bishops-stortford','img':'/thumb.jpg'},{'name':'Cambridge','url':'/location/cambridge','img':'/thumb.jpg'},{'name':'Lymington','url':'/location/lymington','img':'/thumb.jpg'},{'name':'Manchester','url':'/location/manchester','img':'/thumb.jpg'},{'name':'Marlborough','url':'/location/marlborough','img':'/thumb.jpg'},{'name':'Newbury','url':'/location/newbury','img':'/thumb.jpg'},{'name':'Oxford','url':'/location/oxford','img':'/thumb.jpg'});

$('#locations').append('<p>This does not work: ' + testOne[4].name + '</p>');
$('#locations').append('<p>This does work: ' + testTwo[5].name + '</p>');