Dynamically calling JSON data using jQuery & HTML5 data-*

Question

I'm working with ExpressionEngine and have converted my channel entries into JSON, that works nicely.

What I am trying to do is populate a Sweet Alert 2 overlay with information from specific JSON objects using an ID stored in a data-* attribute.

Here is an example of the JSON:

var director_45 = {
  "title": "Andy H",
  "entry_id": 45,
}

And if I do a simple jQuery alert like this, it returns my name:

alert(director_45.title)

However, if I do something like this in jQuery:

$('.trigger-director').on('click', function() {
  var director_id = $(this).data('director');
  var director = 'director_' + director_id;
  alert(director.title);
});

With this HTML to fire it:

<div class="col-xs-6 col-md-3">
  <div class="director-box">
    <img src="/images/made/images/uploads/images/Andy_400_300_c1.jpg" class="img-responsive" width="400" height="300" alt="" />
    <h3>Andy H</h3>
    <p>Director</p>
    <a class="trigger-director" data-director="45">Find out more</a>
  </div>
</div>

The alert upon clicking the 'Find out more' link only shows "Undefined".

I've created a jsFiddle link here too - https://jsfiddle.net/zu103vxc/

Any idea what it is that I'm doing wrong and/or missing?

var director = window[ 'director_' + director_id]; global variables are properties of the window object and you can access them using array notation — Ruan Mendes
– Ruan Mendes, Commented Jun 28, 2016 at 11:14
director is not an object, director is a string 'director_45', ohh @JuanMendes, that one will come handy — inubs
– inubs, Commented Jun 28, 2016 at 11:14
@JuanMendes Interestingly the console says "Uncaught TypeError: Cannot read property 'title' of undefined" — Andy Holmes
– Andy Holmes, Commented Jun 28, 2016 at 11:17
@andy do some closer debugging, if there's a global variable named director_45, it will work — Ruan Mendes
– Ruan Mendes, Commented Jun 28, 2016 at 11:20

madalinivascu · Accepted Answer · 2016-06-28 11:46:06Z

1

Use eval()

var director_45 = {
  "title": "Andy H",
  "entry_id": 45,
}

alert(director_45.title)

$('.trigger-director').on('click', function() {
  var director_id = $(this).data('director');
  var director = 'director_' + director_id;
  alert(eval(director).title);
});

or global variables

var director_45 = {
  "title": "Andy H",
  "entry_id": 45,
}
window.director_45 = director_45;
alert(director_45.title)

$('.trigger-director').on('click', function() {
  var director_id = $(this).data('director');
  var director = 'director_' + director_id;
  alert(window[director].title);
});

answered Jun 28, 2016 at 11:46

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

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

1 Comment

Andy Holmes Over a year ago

Thank you very much, decided to go along the global var route. Saved me a massive headache :)

Collectives™ on Stack Overflow

Dynamically calling JSON data using jQuery & HTML5 data-*

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related