Using JSON and underscore.js to link to content

Question

I have a JSON file titled with many different attributes regarding books (author, desc, title etc). I am using JSON to load the content into a div and display only the title. My problem is I'm trying to make each title a link and display the rest of the content for that specific book in a separate div on the same page. Below is what I have so far. Whenever I try to reference anything after the click function my response it "undefined"

$.getJSON("data/data.json", function(data){
   var res = _.sortBy(data.books, function(item) { return item.name });
   _.each(res, function(item){ 
      $("#books").append("<p class='book'>"+item.name+"</p>");
   });
$(".book").click(function() {
 var clickedItem = $(this);
$("#details").append("<p>"+clickedItem.author+"</p>");

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Evan Davis, Nov 21 '14 at 00:55
You need to show us what you are trying in the `click` handler. — Gabriele Petrioli, Nov 21 '14 at 00:55
Is the `click` event binding happening outside of the `$.getJSON` callback? — Evan Davis, Nov 21 '14 at 00:57
Well there's your problem, `clickedItem` is a jquery object. It has no connection to the `item` from the loop. You need to store that data some other way. — Evan Davis, Nov 21 '14 at 01:12
@Mathletics thank you. I guess I thought $(this) was storing it temporarily. If I don't know how to move forward, you have topics for me to read up on? I appreciate it — user2980869, Nov 21 '14 at 01:24
Read through the [jQuery learning center](http://learn.jquery.com/), and before that, read a book about JavaScript. I like The Good Parts, but I read it after I started programming. — Evan Davis, Nov 21 '14 at 01:26

Gabriele Petrioli · Accepted Answer · 2014-11-21T01:46:03.430

0

You could store the details of each book in the data of the node. This way you can access it anytime..

$.getJSON("data/data.json", function(data){
    var res = _.sortBy(data.books, function(item) { return item.name });
    _.each(res, function(item){ 
        var book = $("<p class='book'>"+item.name+"</p>").data('details', item);
        $("#books").append(book);
    });

    $("#books").on('click', '.book', function() {
        var clickedItem = $(this),
            details = clickedItem.data('details');

        $("#details").html("<p>"+details.author+"</p>");
    });
});

edited Nov 21 '14 at 01:46

answered Nov 21 '14 at 01:24

Gabriele Petrioli

191,379
34
261
317

Thanks for your help. It's giving me and error in the console for the line with var book "Uncaught SyntaxError: Unexpected identifier " – user2980869 Nov 21 '14 at 01:37
@user2980869 that is strange.. do you have you code live somewhere where we can see it in action ? – Gabriele Petrioli Nov 21 '14 at 01:41
No, I didn't know where to put it because of the JSON file. Any recommendations? – user2980869 Nov 21 '14 at 01:52
You could try http://plnkr.co/edit which allows for creation of files – Gabriele Petrioli Nov 21 '14 at 01:54
Used your code from jfiddle and it's working. Thank you so much! I'll also keep that site in mind. – user2980869 Nov 21 '14 at 01:57
Here is a demo in that site (*so that we can use the `$.getJSON` instead of the `$.post`*) http://plnkr.co/edit/tf60qdludC7MmnDvW2VA – Gabriele Petrioli Nov 21 '14 at 01:58

Using JSON and underscore.js to link to content

1 Answers1