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...
Improve this question
5
  • 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"}] Commented Jan 9, 2014 at 23:16
  • Where is there an 'in' operator? Commented Jan 9, 2014 at 23:16
  • 2
    Shouldn't you first parse the string to an object? See this: stackoverflow.com/questions/4935632/… Commented Jan 9, 2014 at 23:17
  • I suggest using the jsRender plugin: weblogs.asp.net/stevewellens/archive/2011/12/01/… Commented Jan 9, 2014 at 23:18
  • content = JSON.parse(content); Commented Jan 9, 2014 at 23:18

2 Answers 2

Reset to default
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

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

4 Comments

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 github.com/douglascrockford/JSON-js
Correct, both parse() and stringify() would require a 'shim'.
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 after fixing all the problems use the snippet I've added above.
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

Improve this answer

2 Comments

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 :)
In your case change appendTo to just append.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.