1

I have a JSON object that looks like this:

var content = '[{"title":"John Apple","lastname":"Apple"},
{"title":"Kumar Patel","lastname":"Patel"},
{"title":"Michaela Quinn","lastname":"Quinn"},
{"title":"Peyton Manning","lastname":"Manning"},
{"title":"John Doe","lastname":"Doe"},
{"title":"Jane Lee","lastname":"Lee"},
{"title":"Dan McMan","lastname":"McMan"},
{"title":"Yu Win","lastname":"Win"}]';

And I am trying to edit it with jQuery to display in my div tag with the id of content-view

here is my jquery:

$.each(content, function(t, l){
  $('#view-content').appendTo('<div id = "' + l + '">' + t + '</div>');
});

For some reason on my jsFiddle, which is right here: http://jsfiddle.net/gAWTV/

It just comes up blank with the result. Does anyone have any ideas? I am stumped...

---EDIT---

What i would like to do is have everything output into its own div tags like this:

<div id="Apple">John Apple</div>
<div id="Patel">Kumar Patel</div>
<div id="Quinn">Michaela Quinn</div>
etc...
scapegoat17
  • 5,509
  • 14
  • 55
  • 90
  • console showing: Cannot use 'in' operator to search for '332' in [{"title":"John Apple","lastname":"Apple"},{"title":"Kumar Patel","lastname":"Patel"},{"title":"Michaela Quinn","lastname":"Quinn"},{"title":"Peyton Manning","lastname":"Manning"},{"title":"John Doe","lastname":"Doe"},{"title":"Jane Lee","lastname":"Lee"},{"title":"Dan McMan","lastname":"McMan"},{"title":"Yu Win","lastname":"Win"}] – digitalextremist Jan 09 '14 at 23:16
  • Where is there an 'in' operator? – scapegoat17 Jan 09 '14 at 23:16
  • 2
    Shouldn't you first parse the string to an object? See this: http://stackoverflow.com/questions/4935632/how-to-parse-json-in-javascript – SOReader Jan 09 '14 at 23:17
  • I suggest using the jsRender plugin: http://weblogs.asp.net/stevewellens/archive/2011/12/01/goodby-jquery-templates-hello-jsrender.aspx – Steve Wellens Jan 09 '14 at 23:18
  • content = JSON.parse(content); – gorgi93 Jan 09 '14 at 23:18

2 Answers2

4

Your content is a string, not an array of objects.

You firstly need to store it as an array, so get rid of the single quotations marks.

var content = [{"title":"John Apple","lastname":"Apple"},
{"title":"Kumar Patel","lastname":"Patel"},
{"title":"Michaela Quinn","lastname":"Quinn"},
{"title":"Peyton Manning","lastname":"Manning"},
{"title":"John Doe","lastname":"Doe"},
{"title":"Jane Lee","lastname":"Lee"},
{"title":"Dan McMan","lastname":"McMan"},
{"title":"Yu Win","lastname":"Win"}];

Unless there is a reason you store it as a string? Then you need to parse it.

var content_object = JSON.parse(content);

Then you can run your code. However, I think you want to "stringify" your JSON. If that's the case you also need to swap t with l, because l is the object. Finally, you want to append, not appendTo. The latter appends the subject to the target you specify, not the other way round (so in your case appendTo appends #view-content to your div you've constructed, which doesn't work).

$.each(content, function(t, l){
    $('#view-content').append('<div id = "' + t + '">' + JSON.stringify(l) + '</div>');
});

JSFiddle

Final comment, I would use document fragments to build your list instead of appending the new divs to an existing one in the each loop - that improves performance.

After OP edit:

Change the last snippet to:

$.each(content, function(t, l){
    $('#view-content').append('<div id = "' + l.lastname + '">' + l.title + '</div>');
});

Updated JSFiddle

MMM
  • 7,221
  • 2
  • 24
  • 42
  • Don't forget that if you need a wider browser support, not all IE browsers and older versions of other browsers implement JS1.7 so you might need to pull in the JSON2 library by Douglas Crockford from github https://github.com/douglascrockford/JSON-js – Itanex Jan 09 '14 at 23:24
  • Correct, both `parse()` and `stringify()` would require a 'shim'. – MMM Jan 09 '14 at 23:26
  • please see my edit above. I realize now that I didn't really provide what I needed to be solved. It has been a long day :) – scapegoat17 Jan 09 '14 at 23:31
  • @scapegoat17 after fixing all the problems use the snippet I've added above. – MMM Jan 09 '14 at 23:34
0

Try this:

 var content = [{"title":"John Apple","lastname":"Apple"},
 {"title":"Kumar Patel","lastname":"Patel"},
 {"title":"Michaela Quinn","lastname":"Quinn"},
 {"title":"Peyton Manning","lastname":"Manning"},
 {"title":"John Doe","lastname":"Doe"},
 {"title":"Jane Lee","lastname":"Lee"},
 {"title":"Dan McMan","lastname":"McMan"},
 {"title":"Yu Win","lastname":"Win"}];

$.each(content, function(t, l){

 $('<div/>',{
  id: l,
  text:t }).appendTo('#view-content');

});

DEMO

Alex Shilman
  • 1,547
  • 1
  • 11
  • 15