2017-06-16 80 views
1

我第一次修改JSON数据。我在网上找到的一些例子看起来非常复杂,我无法简化它,以便我能理解文件。我决定创建一个使用JSON数据填充它的博客网站。所有文件都在HTML文件外部。 JS文件已正确链接。 JS文件位于根目录的js文件夹中。 index.html和blogs.json位于根目录中。使用jQuery检索JSON

这里的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> 

这里的外部JSON数据:

{ 
"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." 
    }] 
} 

这里是我的外部JS文件:

$("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); 
     }); 
    }; 
}); 

控制台显示的错误:

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

我在正确的轨道上吗?任何意见和建议将不胜感激。

+0

从你的'blogs.json'文件删除'JSON =',它应该工作 – BravoZulu

+0

这并修正语法错误。现在控制台显示:XML解析错误:格式不正确 位置:file:///Users/David/Sites/Website%20Template/blogs.json 行号1,列1:blogs.json:1:1 – DavidG

+0

我想你需要配置你的web服务器的'mime.types'文件,以便为'.json'扩展名返回MIME类型'application/json'。 – Barmar

回答

1

这并没有解决您的具体问题的jQuery(使用克隆),但这里的另一种方式去了解我在想什么,你想要做的..

的test.html(在根文件夹)

<!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(在根文件夹)

{"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(在JS文件夹位于根文件夹)

$(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); 
     }) 
    }); 
}) 
+0

是的,这工作。谢谢。它可能是在json路径中的“./” – DavidG

+0

我认为我有文件夹structyre重新创建完全与你现在和即时通讯使用./在文件夹路径。虐待更新答案,以显示我的文件夹和文件设置.. –

+0

@DavidG我更新了我的工作的答案。我不认为我有时间玩你的.clone方法做事情,因为我没有过分熟悉它,但今晚晚些时候可能会用它练习。让我知道你是否可以为你工作。 –