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.

can you provide a plnkr?

noypi
– noypi

2014-09-11 12:47:29 +00:00
Commented Sep 11, 2014 at 12:47 — noypi
– noypi, Commented Sep 11, 2014 at 12:47

Marian Ban · Accepted Answer · 2014-09-11 12:47:36Z

3

you can bind html directly in AngularJS:

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

answered Sep 11, 2014 at 12:47

Marian Ban

8,1881 gold badge35 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jonny pixel Over a year ago

Yes that worked. I added ngSanitize to the app as described here: docs.angularjs.org/api/ng/directive/ngBindHtml. Also note to everyone who will be using HTML in JSON, to avoid multiline problem, use HTML minfication services like willpeavy.com/minifier to convert your nice HTML to one line.

Nathaniel Ford · Accepted Answer · 2015-12-30 20:38:55Z

This is an example of how to add HTML data into JSON. JSON helps you to retrieve data very fast and is very effective.

{
    "title":"mongoose connect",
    "description":"<p> Aaron, thanks. I read the doc on connection pools and think I understand it. The problem I am having is defining the db connection in the app.js file and then using that connection in my model definition files (one model per file) and in the routing files. I've tried the global.conn idea that Daniel providedcouldn't get it to work and the separate index.js file that Sergey suggested but couldn't get it work either. Is there an example of an express appsp that uses createConnection to create one connection that is shared in separate modules? – </p>",
    "tags":["node js","mongoose","database mongodb connect","mongoose connect"],
    "code":"<code> var mongoose = require('mongoose');<br> &nbsp;mongoose.connect('mongodb://127.0.0.1:27017/mytest'); </code>",
    "created_on":" -- 04/10/2015",
    "author":" -- by aqib"
}

This way you are able to store html data and can access it using a key. You can store numerous JSON objects into array.

Collectives™ on Stack Overflow

JSON storing HTML

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related