2

I have an API that returns a JSON formatted array of users within a given pair of lat/ long bounds.

I'm using this data to plot a number of markers on a map, based on the location of each user. I also want to render a HTML list on each client request so that I can show the list of plotted users alongside the map.

What is the best way to get the list HTML to the client?

To me it seems like an incorrect solution to return the HTML for the user list within the initial API call (response.html, or something), although this feels like I'm shoe-horning functionality into an otherwise clean API response.

I also don't want to make two API calls (one for the initial data and one for the HTML), for obvious reasons (overhead).

Finally, I don't want to generate the HTML client-side (in JavaScript), as I already have a class to do this for me server-side.

What options does that leave me with?

Thanks

Improve this question
5
  • You should get html from the server. The html should request data using ajax requests to the api once its loaded. The api and html can be located within same webroot or different. You sshould think about structuring it as if they come from different urls.
    – Ozair Kafray
    Sep 14, 2013 at 19:31
  • I think you might have misunderstood my question. My page is already rendered, I'm making an API call to get user location data for the map. However I also want to render that location data as a HTML list on the page, without making another API call, and without pulling down the HTML in the original call.
    – James
    Sep 15, 2013 at 9:38
  • @James, what is your reasoning for not wanting to pull down the HTML for this list in the original page call? Is the feature only used some of the time and the time to build the list significant (in other words, do you want only want to build the html for the list on-demand to increase general performance)? Or is there some constraint that requires the html to built at the time of the request (e.g. because the list is dynamic and you want it to be most up-to-date, or because it requires some additional input from the user only available on the page)?
    – Ben Lee
    Sep 17, 2013 at 1:06
  • I ask these questions because if the html is static between page load time and api request time, and not expensive to build, a good solution is to just return it with the initial page load as Ozair recommended. I want to get a better sense of your constraints to better answer the question.
    – Ben Lee
    Sep 17, 2013 at 1:07
  • Ah, sorry I may not have been as clear as possible in my question. I'm not talking about the original page request. Rather, I'm talking about every time the user updates (adjusts bounds etc) the map, I want new markers to be placed based on the bounds, and the HTML list to update to reflect these changes (the latter reason you suggested). It makes sense to me to return the location data and HTML in one easy API call, but I'm not sure if this is "best" practice based on separation of concerns.
    – James
    Sep 17, 2013 at 8:23

2 Answers 2

Reset to default
2

Return the data for the list and use client side templating to convert it into HTML.

GET http://yourwebserver.com/users.json

[{ name: 'foo'}]

using a Mustache.js template like this

Mustache.render('<ul>{{#.}}<li>{{name}}</li>{{/.}}</ul>', data)

With this aproach you have a simple interface, reduce data transfer, and make the template static therefore cachable.

Improve this answer
1

REST is a vary adaptive architecture (as I am sure you realize).

The answer to your question I think has more to do with you as a programmer than anything else. For example, there is nothing wrong with the following API call

GET http://yourapi.com/users.json
GET http://yourapi.com/users.html

These are two different representations of the same resource. Perfectly acceptable in a REST API.

I do however see your point about keeping the API 'clean'. I have a REST API which only outputs json, but I then need to have a client which converts the json to HTML. This could either be another web server or could be done through javascript.

On re-reading your question I can see that you want both a json response and a HTML response with the same API call. The only way you are really going to achieve this is as mentioned in the comments above: use an ajax request to GET the json, and then manipulate the page as required with javascript (i.e. use javascript to update the marker data from json, and the users list)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.