File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Adding a list of data from JSON to a page element Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Adding a list of data from JSON to a page element" Watch "Adding a list of data from JSON to a page element" New topic
Author

Adding a list of data from JSON to a page element

Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

So, in my app, I will be making REST calls to the server that will send me back JSON of data. In one example a List of Users get returned froma query I run that I get friends of friends as a list. I want to display them on my page to look and act just like searching and adding friends on FaceBook. I could put it into an overlay and scrolling, but sometimes the List of Users I get, might be a list of Users attending an event, so not as large a list. I want that list of Users on the page itself in the middle content. I plan on making it very pretty and want to avoid using tables, but it might also end up needing pagination. I already have the serverside set up for pagination, I just pass the page number and number of users.

So my question is really the best approach to take in my Jquery javascript right after I have retreived the List of Users in JSON

One idea I had was to have a div or section that holds the placeholders for a user, and when I get the list of Users, loop through the users and clone the div for each user and show it in the content section in a list of items.
Another idea, is loop through the JSON and in the Javascript code append html. (I really don't want any HTML in my javascript code, but if that is the best way then so be it)
Third idea, there are table jquery plugins, but the look and feel of those plugins is very much table look and feel. I don't want columns. All the data for me I would put in one column with css to make it look cool.

Are there any other possible ideas I don't know about. (JSP page rendering on the serverside is not a solution for me) I only have one jsp page and that is the index to get the page started.

Thanks

Mark


Perfect World Programming, LLC - Two Laptop Bag - Tube Organizer
How to Ask Questions the Smart Way FAQ
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60782
    
  65

You might want to check out the jQuery tmpl plugin, which provides client-side templating.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

Bear Bibeault wrote:You might want to check out the jQuery tmpl plugin, which provides client-side templating.


Thanks Bear, I had looked at it before, but had forgotten about it. But reading about it it says that it is in beta and that it will not be worked on, that there are two other sort of alternatives and I can't tell but looks like competing ones between jsRender/jsViews and JQuery UI templates. I think the latter isn't completed yet.

Looking at some more stuff, Mustache and Handlebars looks promising, and from there ember.js looked like the style of webapp and approach that I am trying to achieve, but do I couple myself to too many outside JavaScript libraries. I mean I am coupled to JQuery now, but it is so prevalent that I don't see that as being a problem.

Thanks

Mark
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

Now I see a library called backbone.js that looks like the same. Easy to update the html based on data domain brought back from the server as json ajax calls.

Mark
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

Looks like I am choosing to use ICanHaz.js which uses Mustache templating.

Thanks

Mark
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

Mark Spritzler wrote:Looks like I am choosing to use ICanHaz.js which uses Mustache templating.

Thanks

Mark


ICanHaz is actually a really cool templating api. They made it really easy and I like that I can create templates and partials to be added to templates, so a template inside another template.

These are the kind of libraries/tools out there that I am looking for. When they are real simple and easy to start using, then to me that is a big part of what makes one of these great.

Mark
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60782
    
  65

 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
 
subject: Adding a list of data from JSON to a page element
 
Similar Threads
Pagination
PAGINATION
pagination problem
Pagination
Pagination