Jquery .click function acces specific object

Question

If i have an object list and using .append() to show every object title as a li and when i click on a object i want to acces and append that whole object on my page, my object looks like this:

var object = {
"post1" : {
    "title" : "title1",
    "content" : "blllsd",
    "image" : "http://lorempixel.com/400/200/",
     "latest" : false
 },
"post2" : {
    "title" : "title2",
    "content" : "blalbvlasd",
    "image" : "http://lorempixel.com/700/200/",
     "latest" : true
},
"post4" : {
    "title" : "title3",
    "content" : "bla",
    "image" : "http://lorempixel.com/900/400/",
     "latest" : false
    }
};

jquery:

    var result = $("#result");

    for (var key in object) {
    if (!object.hasOwnProperty(key)) continue;
    var element = object[key];
    };

var side = $("ul");
var  latest = $("#latest")
side.append("<li class='side'>" + element.title + "</li>");

$(".side").click(function() {
     for (var i=0; i<element.length; i++) {
          latest.prepend( element[i].title + element[i].content + element[i].image); 
        };
   };

This dont print out anything and i dont know how to do it. Ive read this similar post but i dont explain my problem and is little outdated i think or its just me having a hard time understand so if an expert can help that would be awsome. JavaScript closure inside loops – simple practical example I have messed around with ' this ' but no progress.

score 1 · Accepted Answer · answered Nov 15 '16 at 12:18

You can access as shown as shown in snippet. You can store key of that object to li.

var object = {
"post1" : {
    "title" : "title1",
    "content" : "blllsd",
    "image" : "http://lorempixel.com/400/200/",
     "latest" : false
 },
"post2" : {
    "title" : "title2",
    "content" : "blalbvlasd",
    "image" : "http://lorempixel.com/700/200/",
     "latest" : true
},
"post4" : {
    "title" : "title3",
    "content" : "bla",
    "image" : "http://lorempixel.com/900/400/",
     "latest" : false
    }
};
var result = $("#result");

var side = $("ul");
var  latest = $("#latest")
for (var key in object) {
  if (!object.hasOwnProperty(key)) continue;
  var element = object[key];
  side.append("<li class='side' key='" + key + "'>" + element.title + "</li>");
};

$(".side").click(function() {
     var key = $(this).attr("key").trim();
    var obj = object[key]; //use this object data to populate your html
  $(result).html(JSON.stringify(obj));
  //console.log(obj);
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul></ul>

<pre id="result"></pre>

Thanks for the replay. Now i have another problem, When I click on the first object it prints out the object 3 times, and when i click on the second object two of that prints out and when i click on the last it is working as it should only printing out one. Why is it doing that'? @Jyothi Babu Araja — F.Kraemer, Nov 15 '16 at 15:26

Jquery .click function acces specific object

1 Answers1