JSON storing HTML

Question

I am learning AngularJS and exited about storing data in JSON format. I am building a real app to learn on a real project.

It's an online magazine. Now I store all the articles basic data in articles.json. This way I can push all the basic articles data to the home page.

[
    {
        "id":"1",
        "category": "Activity",
        "title": "Title goes here",
        "short_desc": "Short description goes here",
        "images": [
            "img/article-img.jpg"
        ]
    },
    {
        "id":"1",
        "category": "Activity",
        "title": "Title goes here",
        "short_desc": "Short description goes here",
        "images": [
            "img/article-img.jpg"
        ]
    }, ...
]

Then based on the article ID I direct user to a new template and load relevant to URL article JSON file : article1.json. It looks like this.

 {
    "id":"1",
    "category": "Activity",
    "title": "Title goes here",
    "html_desc": "<h1>Article subtitle goes here<h1><p>Paragraph text<\p>",
    "images": [
        "img/featured-img.jpg"
    ]
}

And of course I run into problem, that in JSON I can't that easily use HTML tags or even if I could, it will be a nightmare to convert article paragraphs and headings to JSON format.

Please direct me to the best practice. I assume I am missing some crucial parts in the way I am trying to handle data. Maybe I should use some database for storing data, not JSON.

Please advice the best practice of using JS based frameworks like AngularJS and data storage.

Answer 1

you can bind html directly in AngularJS:

<div ng-repeat="article in articles">
    <div ng-bind-html="article.html_desc"></div>
</div>