Angular directive for loading JSON data embedded in the HTML

PublishedAugust 10, 2016

•3 min read•View as Markdown

Angular directive for loading JSON data embedded in the HTML

Søren Kruse

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Dynamic caching policy with Polly

Polly is great library for easily configuring different kinds of policies around code execution, be it retry, circuit breaker, caching or lots of other things. It's probably most often used around HTTP requests. If you haven't heard about it you defi...

Jan 15, 20213 min read

Unit Testing - Part 2: Naming, structure and readability

This is part 2 of my series on unit testing in .NET (C#) and will be about my conventions regarding naming unit tests, how to structure them and which parts to test. And lastly I will help you increase readability of assertions and potential error me...

Jan 9, 20217 min read

Unit Testing - Part 2: Naming, structure and readability

Unit Testing - Part 1: Getting started with unit tests in .NET

I feel like unit testing is very important and very beneficial in a lot of ways. It helps with not breaking existing functionality and thereby also making you more confident in changing code without fear of breaking important stuff. Often it also mak...

Dec 28, 20207 min read

Unit Testing - Part 1: Getting started with unit tests in .NET

Getting NSwag to work behind reverse proxy

I've been working with Swagger through NSwag a lot recently and also needed to get it to work when hidden behind a reverse proxy - i.e. another service forwarding a request to the service exposing the Swagger UI. Some of the issues I've had along the...

Dec 18, 20202 min read

Getting NSwag to work behind reverse proxy

NSubstitute - make async method (Task) throw an exception

The other day I was writing a unit test to verify what was supposed to happen when a Task would throw an exception when awaited. It wasn't as straight forward as I first assumed, but I quickly found this Stack Overflow post that helped me: https://st...

Dec 12, 20203 min read

NSubstitute - make async method (Task) throw an exception

Søren Kruse | .NET, C# and Azure

51 posts

Usage

To start using the directive you need to include json-data as a dependency for your app:

// Add 'json-data' as a dependency for your app var app = angular.module("MyApp", ["json-data"]);

Below are some examples on how to then use the directive.

 <json-data model="vm.movies"> [ { "title": "Warcraft: The Beginning", year: 2016 }, { "title": "Star Trek: Beyond", year: 2016 } ] </json-data>

You can use the callback attribute to be notified when the directive have been initialized and the data loaded.

The data variable will be substituted with the loaded data, but you don’t have to include it.

 <json-data callback="vm.onMovieLoaded(data)"> { "title": "Warcraft: The Beginning", "year": 2016, "imdbScore": 7.5, "cast": [ "Travis Fimmel", "Paula Patton", "Ben Foster", "Dominic Cooper" ], "director": "Duncan Jones" } </json-data>

You can also combine the two if you want to.

<json-data model="vm.movies" callback="vm.onMoviesLoaded()">  </json-data>

All valid JSON can be used – objects, arrays and simple types.

 <json-data model="vm.count">5</json-data> <json-data model="vm.userName">"Krusen"</json-data> <json-data model="vm.isAdmin">true</json-data>  <json-data when-all-initialized="vm.onAllLoaded()"> <json-data>  </json-data> <json-data>  </json-data> </json-data>

By default the directive/element will be removed from the DOM after it has been initialized. If you do not want this behavior you can add a keep-element attribute.

 <json-data model="vm.data" keep-element>  </json-data>

Command Palette

Comments

More from this blog

Installation

Usage