CODEWITHSUNDEEP
javascripthtmljson
Soarabh
Soarabh

Reputation: 2960

Loading json File in a HTML file

I have a JSON file which contains HTML content. I want to load it in my main HTML file when a user clicks on a button.

ABC.json contains:

<li><img src="images/picture6.jpg" /></li>
<li><img src="images/picture5.jpg" /></li>
<li><img src="images/picture4.jpg" /></li>
<li><img src="images/picture3.jpg" /></li>
<li><img src="images/picture2.jpg" /></li>
<li><img src="images/picture1.jpg" /></li>

The Javascript code that I'm using is:

$("button").click(function(){
    $.getJSON("javascript/lib/domain.json", function(data){
        console.log(data);
    });
});

Unfortunately, it doesn't work.

Upvotes: 0

Views: 6100

Answers (3)

Jhon Andrew
Jhon Andrew

Reputation: 188

Your .json file contains pure html and not JSON. Why not use .html or .txt instead?

Or you can try this:

var my_html = $.parseJSON(data);
console.log(my_html);

Upvotes: 0

Bunlong
Bunlong

Reputation: 662

Please edit your code:

abc.json

"img": [
        {"src": "images/picture6.jpg"},
        {"src": "images/picture5.jpg"},
        {"src": "images/picture4.jpg"},
        {"src": "images/picture3.jpg"},
        {"src": "images/picture2.jpg"},
        {"src": "images/picture1.jpg"},
       ]

Javascript 

$("button").click(function(){
    $.getJSON("javascript/lib/abc.json", function(data){
        console.log(data);
    });
});

Upvotes: 2

user1088520
user1088520

Reputation:

The file ABC.json does not contain any valid JSON.

I think it's worthwhile visiting http://www.json.org/ You will get a better idea about json and how to use it.

Specifically you will find the way to pass html within json in different languages

Upvotes: 5

Related Questions