Loading json File in a HTML file

Question

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.

if it contains just HTMLthen why dont you make it .html?

Furqan Hameedi
– Furqan Hameedi

2012-06-16 14:31:30 +00:00
Commented Jun 16, 2012 at 14:31 — Furqan Hameedi
– Furqan Hameedi, Commented Jun 16, 2012 at 14:31
your json file is not json _

Ram
– Ram

2012-06-16 14:32:35 +00:00
Commented Jun 16, 2012 at 14:32 — Ram
– Ram, Commented Jun 16, 2012 at 14:32

Kev · Accepted Answer · 2012-06-16 16:33:35Z

5

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

edited Jun 16, 2012 at 16:33

Kev

120k53 gold badges308 silver badges396 bronze badges

answered Jun 16, 2012 at 14:38

user1088520

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

1 Comment

citruspi Over a year ago

Although I feel that the original poster, saorabh should visit this site to see what JSON actually consists of, I don't feel that this is a legitimate answer; you're just pointing him to a link. Instead, you should explain what he's doing wrong or why it can't be done (if that is the case).

Bunlong · Accepted Answer · 2012-06-16 16:39:06Z

2

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);
    });
});

answered Jun 16, 2012 at 16:39

Bunlong

6621 gold badge9 silver badges22 bronze badges

Comments

WhatsThePoint · Accepted Answer · 2018-08-20 09:10:12Z

0

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);

edited Aug 20, 2018 at 9:10

WhatsThePoint

3,63511 gold badges35 silver badges58 bronze badges

answered Jun 16, 2012 at 15:03

Jhon Andrew

1883 silver badges14 bronze badges

2 Comments

Soarabh Over a year ago

First thanks Jhon.. Can you please guide me if I make it as a html file,then how I can achieve this.

Jhon Andrew Over a year ago

If it is already an html file, then you can load it by using for example the following: $.load('list.html',function(data){ console.log(data); }); or $.get('list.html',function(data){ console.log(data); });

Collectives™ on Stack Overflow

Loading json File in a HTML file

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related