Are you worried about falling behind the curve when it comes to keeping up to date with the latest client-side Javascript framework?  Over the past few weeks, I've been interviewing people for a front-end role. One interesting pattern that emerged was that every candidate had completely different viewpoints around how the front-end side of a website should be architected. Some of the people wanted to use Jquery, other felt Jquery was only invented to get around the limitation in previous browsers, which they helpfully pointed out is no longer the case.

Some developers wanted to work with angular, some backbone and some just Javascript and manipulate the DOM directly. If you find yourself in the same boat, then I think these differences in opinions from so many 'senior' people highlight that the browser stack of technology is constantly changing. If you're reading this and you're worried about picking the right technology, then feel confident that there isn't a single right answer that will please everyone.

From my experience, one approach might work well, but two different front-end developers will completely disagree whether it's right, or not. With that in mind, in today's post, I'm going to explain how you can consume data from a web API, using plain old Javascript. If you have really simple needs, then in the majority of the time you don't need to complicate things too much.

If, on the other, if your web application is a single-page-application, then you might want to consider a framework.

Web API in Umbraco

If you're new to using Web API within Umbraco, I suggest you read, How To Create A Web API In Umbraco In Less Than 5 Minutes!. The gist of that article is that Umbraco provides a special controller you can use that makes exposing a web API in your Umbraco application easy.

If you are used to MVC routing and you're happy with using a standard web API controller, then, by all means, you can add a route in your routes config and use the standard MVC calls. If you use this approach, you should be aware some of the Umbraco contexts might not be set correctly. In summary, the Umbraco controller will probably be a bit quicker to use, but your API URL will need to have Umbraco in it.

Controller Code

The web API code is pretty simple. Inherit from UmbracoApiController and create a method to return data back to your webpage. your methods

I've left the HTML purposely simple too, hopefully, make the post easier to follow: The code above might not be the most efficient or beautiful bit of code, but in very simple situations, it will do the job. As you can see getting your head around how to call content from a web API can be pretty simple and straightforward. If you're new to Javascript then I recommend that you buy and read, Javascript the Definitive Guide.