Json object 可变为 html 和 jquery

Question

所以我有这段代码，但我没有让它工作，我在一个基于 jquery 的博客上工作，加载了 JSON objects，但我碰壁了。我需要将 objects 属性添加到我的 body 中的 div 元素中以制作 blog-posts。我应该能够在 JSON 文件中放入一个新的 post，它应该出现在 body 中。我不知道如何执行此操作，到目前为止我的代码如下所示：

$( document ).ready(function() {

 $.ajax({
 dataType: "json",
 url: "posts.json",
 }).done(function(resp){

  for(var p in resp){
   if(resp.hasOwnProperty(p)) continue;
   var title = resp[p].title;
   var content = resp[p].content;
   var author = resp[p].author;
   var date = resp[p].date;
   var image = resp[p].image;


 }

});

});

和 JSON 文件：

        { 
         "post1" : {
                    "title":  "My day",
                    "content" :  "blalbvblblblblblblallksdlmalmdksdkasd",
                    "date" :  "12/0-16",
                    "author" :  "robert",
                    "image" :  "../blogg/img.jpg"
            },
         "post2" : {
                    "title":  "This right here",
                    "content" :  "blalbvblblblblblblallksdlmalmdksdkasd",
                    "date" :  "12/0-16",
                    "author" :  "robert",
                    "image" :  "../blogg/img.jpg"
            },
         "post4" : {
                    "title":  "Min vackra",
                    "content" :  "blalbvblblblblblblallksdlmalmdksdkasd",
                    "date" :  "12/0-16",
                    "author" :  "klara",
                    "image" :  "../blogg/img.jpg"
            }

        }

首先我创建的变量是未定义的，为什么？

如何使变量包含不同的 posts？

抱歉我编程很烂...

Answer 1

像这样使用对象键模式：

for (var key in object) {
    if (!object.hasOwnProperty(key))
        continue;
    var element = object[key];
    console.log(element);
}

您可以在 dom 中添加元素使用 jquery append。

example

Json object 可变为 html 和 jquery

Json object to varible to html with jquery

jquery

blogs

json

object