CODEWITHSUNDEEP
jqueryjsongetjson
DavidG
DavidG

Reputation: 834

Retrieving JSON using jQuery

I'm tinkering with JSON data for the first time. Some examples I have found online seem very complex and I am having trouble simplifying it so that I can understand the file. I decided to make a blog website that would use JSON data to populate it. All files are external to HTML file. JS file has been properly linked. JS file is in js folder of root. The index.html and blogs.json are in root directory.

Here's the HTML:

<div class="blog_list"> <!-- Div to hold populated blogs -->

<!-- Blog Start -->
<div class="blog_post"> 
  <div class="blog_panel">
    <img class="blog_image" src="" alt="">
    <div class="blog_panel_body">
      <h2 class="blog_title"></h2>
      <span class="blog_author_date"></span>
      <p class="blog_content">

      </p>
    </div>
  </div>
</div>
<!-- Blog End -->

</div>

Here's the external JSON data:

{
"blogs": [
    {
    "img": "<img class=\"image\" src=\"img/image.jpeg\" alt=\"Sample image 1\" />",
    "title": "My Amazing Journey",
    "author": "David",
    "date": "June 13, 2017",
    "content": "This is some content."
    },
    {
    "img": "<img src=\"img/image.jpeg\" alt=\"Sample image 2\" />",
    "title": "My Beautiful Journey",
    "author": "David",
    "date": "June 14, 2017",
    "content": "This is some content."
    },
    {
    "img": "<img src=\"img/image.jpeg\" alt=\"Sample image 3\" />",
    "title": "My Wonderful Journey",
    "author": "David",
    "date": "June 15, 2017",
    "content": "This is some content."
    }]
}

Here's my external JS file:

$("document").ready(function () {
    $.getJSON("./blogs.json"), function(json) {
        json.blogs.forEach(function(blog) {
            var newBlog = $('body').find(".blog_post").clone();
            $(newBlog).find(".blog_image").html(blog.img);
            $(newBlog).find(".blog_title").append(blog.title);
            $(newBlog).find(".blog_author_date").append("Written by: " + blog.author + " on " + blog.date);
            $(newBlog).find(".blog_content").append(blog.content);
        });
    };
});

The console shows the error: 

XML Parsing Error: not well-formed Location: file:///Users/David/Site/Website%20Template/blogs.json Line Number 1, Column 1:  blogs.json:1:1

Am I on the right track? Any advice and suggestions would be greatly appreciated.

Upvotes: 1

Views: 189

Answers (1)

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

This doesn't address your exact jquery problem (using clone) but here's another way to go about what I think you want to do..

test.html (in root folder)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>json/js test stack question</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/test.js"></script>
</head>

<body>

<div class="blog_list">

</div>

</body>
</html>

test.json (in root folder)

{"blogs": [
    {
    "img": "blog1.jpg",
    "title": "My Amazing Journey",
    "author": "David",
    "date": "June 13, 2017",
    "content": "This is some content."
    },
    {
    "img": "blog2.jpg",
    "title": "My Beautiful Journey",
    "author": "David",
    "date": "June 14, 2017",
    "content": "This is some content."
    },
    {
    "img": "blog3.jpg",
    "title": "My Wonderful Journey",
    "author": "David",
    "date": "June 15, 2017",
    "content": "This is some content."
    }
]}

test.js (in js folder which is in root folder)

$(function() {
    $.getJSON("./test.json", function(json) {
        var opener = '<!-- Blog Start --><div class="blog_post"><div class="blog_panel">';
        var closer = '</div></div><!-- Blog End -->';
        $(json.blogs).each(function() {
            var body = '' +
                '<img class="blog_image" src="folder/' + this.img + '" alt="' + this.title + '">' +
                '<div class="blog_panel_body">' +
                  '<h2 class="blog_title">' + this.title + '</h2>' +
                  '<span class="blog_author_date">' + this.author + ':' + this.date + '</span>' +
                  '<p class="blog_content">' + this.content + '</p>' +
                '</div>'
            ;
            $('.blog_list').append(opener + body + closer);
        })
    });
})

Upvotes: 1

Related Questions