Debugging JSON in an AngularJS application

So when you query an API or Web service and it chucks you back a load of JSON, you now need to figure out the structure of that data to work it into your AngularJS template. This can sometimes be tricky, especially if you’re not the one that created the data source and it has poor documentation (it happens sometimes, honest). So here’s a handy trick that will help you.

Let’s say for example you’ve executed an Ajax query and stored the resulting data in a $scope variable called dataResult, which would look something like this in your Angular controller:

$scope.dataResult = myDataService.GoGetTheData();

Anywhere within your AngularJS page (make sure it’s within the scope of your AngularJS controller…) you can stick the following code:

<pre>{{ dataResult | json }}</pre>

You will now see the pre-formatted JSON (i.e. still containing all the line breaks, tabbing etc. of the source data) that your mysterious web service has given you.

No more fumbling in the dark trying to guess whether the properties use CamelCase, mixedCase, or if the web service has actually returned any data at all!

You’re welcome 🙂

Posted in AngularJS, Code samples Tagged with: ,

About Maff

Maff Rigby

I'm a certified .Net, Umbraco and AngularJS freelance developer with over 15 years experience in the IT industry. As well as writing code I love to teach; I run a number of workshops and 1-1 coaching sessions on Angular JS and Umbraco, and share what I know and learn here!

I’m social (ish)

Connect with me on LinkedIn, follow me on Twitter, or fail to find me on Facebook.