Проблема с получением данных JSON с $ .getJSON

Question

У меня есть файл json, который нужно захватить, а затем данные из него зацикливаются, а затем данные по каждому циклу, введенные в шаблон, а затем добавляются к родительскому элементу.

Я издевался над этим, используя массив объектов и несколько изображений из сети для целей тестирования.

var postDetails = [ 
    { 
    postTitle: "Post 1", 
    postDate: "1/12/2015", 
    backgroundImage: "http://marcus.ridoutfamily.co.uk/wp-content/uploads/2013/08/78186357b7074a1a3bda5d3c0ed4a2e0.jpg" 
    }, 

    postTitle: "Post 2", 
    postDate: "3/10/2015", 
    backgroundImage: "https://cdn.scratch.mit.edu/static/site/users/avatars/328/6505.png" 
    }, 
    { 
    postTitle: "Post 3", 
    postDate: "12/3/2015", 
    backgroundImage: "http://www.drodd.com/images10/cool-wallpapers18.jpg" 
    }, 
    { 
    postTitle: "Post 4", 
    postSubtitle: "check me out!", 
    postDate: "4/6/2015", 
    backgroundImage: "https://3.bp.blogspot.com/-twGb5CpYy1Y/UPUVtzb9iJI/AAAAAAAAAA8/_uMNLNFNy_w/s1600/cool+backgrounds+for+microsoft+powerpoint.jpg" 
    } 
]; 

Я тогда выводить их, используя следующий цикл:

for (var i = 0; i < postDetails.length; i++) { 
    var template; 
    if (postDetails[i].postSubtitle) { 
     template = '<div class="col-xs-12 col-md-4 col-lg-3">' + '<a href="#">' + 
      '<figure class="blog-post-thumb">' + '<img src="' + postDetails[i].backgroundImage + 
      '">' + '<figcaption>' + '<div class="blog-post-overlay-headings">' + 
      '<h1>' + postDetails[i].postTitle + '</h1>' + '<h3>' + postDetails[ 
       i].postSubtitle + '</h3>' + ' </div>' + '<p>' + postDetails[i].postDate + 
      '</p>' + '</figcaption>' + '</figure>' + '</a>' + '</div>'; 
     whereTo.append(template); 
    } else { 
     template = '<div class="col-xs-12 col-md-4 col-lg-3">' + '<a href="#">' + 
      '<figure class="blog-post-thumb">' + '<img src="' + postDetails[i].backgroundImage + 
      '">' + '<figcaption>' + '<div class="blog-post-overlay-headings">' + 
      '<h1>' + postDetails[i].postTitle + '</h1>' + ' </div>' + '<p>' + 
      postDetails[i].postDate + '</p>' + '</figcaption>' + '</figure>' + 
      '</a>' + '</div>'; 
     whereTo.append(template); 
    } 
} 

достаточно просто.

В этот момент я извлек массив postDetails в файл JSON, и теперь он выглядит так:

{ 
    { 
     "postTitle": "Post 1", 
     "postDate": "1/12/2015", 
     "backgroundImage": "http://marcus.ridoutfamily.co.uk/wp-content/uploads/2013/08/78186357b7074a1a3bda5d3c0ed4a2e0.jpg" 
    }, { 
     "postTitle": "Post 2", 
     "postDate": "3/10/2015", 
     "backgroundImage": "https://cdn.scratch.mit.edu/static/site/users/avatars/328/6505.png" 
    }, { 
     "postTitle": "Post 3", 
     "postDate": "12/3/2015", 
     "backgroundImage": "http://www.drodd.com/images10/cool-wallpapers18.jpg" 
    }, { 
     "postTitle": "Post 4", 
     "postSubtitle": "check me out!", 
     "postDate": "4/6/2015", 
     "backgroundImage": "https://3.bp.blogspot.com/-twGb5CpYy1Y/UPUVtzb9iJI/AAAAAAAAAA8/_uMNLNFNy_w/s1600/cool+backgrounds+for+microsoft+powerpoint.jpg" 
    } 
} 

Я затем экстрагируют мой цикл и сделал мой $.getJSON() запрос теперь код петли следующим образом:

$.getJSON("../assets/scripts/posts.json", function(data) { 
    $.each(data, function(k, v) { 
    posts.push(v); 
    }); 
}); 

Я относительно новичок в $.getJSON(), однако я признаю, что, насколько я понимаю, он в основном запускает вызов ajax.

Так от моего понимания, когда я бегу posts.push(v);, массив сообщений должен выглядеть следующим образом:

posts = [ 
    { 
    postTitle: "Post 1", 
    postDate: "1/12/2015", 
    backgroundImage: "http://marcus.ridoutfamily.co.uk/wp-content/uploads/2013/08/78186357b7074a1a3bda5d3c0ed4a2e0.jpg" 
    }, 

    postTitle: "Post 2", 
    postDate: "3/10/2015", 
    backgroundImage: "https://cdn.scratch.mit.edu/static/site/users/avatars/328/6505.png" 
    }, 
    { 
    postTitle: "Post 3", 
    postDate: "12/3/2015", 
    backgroundImage: "http://www.drodd.com/images10/cool-wallpapers18.jpg" 
    }, 
    { 
    postTitle: "Post 4", 
    postSubtitle: "check me out!", 
    postDate: "4/6/2015", 
    backgroundImage: "https://3.bp.blogspot.com/-twGb5CpYy1Y/UPUVtzb9iJI/AAAAAAAAAA8/_uMNLNFNy_w/s1600/cool+backgrounds+for+microsoft+powerpoint.jpg" 
    } 
] 

В этот момент, я ожидаю, что я должен быть в состоянии запустить цикл, как и раньше, за исключением над вместо массива postDetails.

Где я поступил не так, и что я могу сделать для решения этой проблемы, это важно, как и в проекте, у меня есть аналогичные модули, которые можно запускать, получая json-файлы и зацикливая их на шаблоны.

Answer 1

Ваш JSON недопустим, здесь у вас есть два действительный JSON:

[ 
    { 
     "postTitle": "Post 1", 
     "postDate": "1/12/2015", 
     "backgroundImage": "http://marcus.ridoutfamily.co.uk/wp-content/uploads/2013/08/78186357b7074a1a3bda5d3c0ed4a2e0.jpg" 
    }, { 
     "postTitle": "Post 2", 
     "postDate": "3/10/2015", 
     "backgroundImage": "https://cdn.scratch.mit.edu/static/site/users/avatars/328/6505.png" 
    }, { 
     "postTitle": "Post 3", 
     "postDate": "12/3/2015", 
     "backgroundImage": "http://www.drodd.com/images10/cool-wallpapers18.jpg" 
    }, { 
     "postTitle": "Post 4", 
     "postSubtitle": "check me out!", 
     "postDate": "4/6/2015", 
     "backgroundImage": "https://3.bp.blogspot.com/-twGb5CpYy1Y/UPUVtzb9iJI/AAAAAAAAAA8/_uMNLNFNy_w/s1600/ cool+backgrounds+for+microsoft+powerpoint.jpg" 
    } 

] 

Еще один:

{ 
    "obj0" : { 
     "postTitle": "Post 1", 
     "postDate": "1/12/2015", 
     "backgroundImage": "http://marcus.ridoutfamily.co.uk/wp-content/uploads/2013/08/78186357b7074a1a3bda5d3c0ed4a2e0.jpg" 
    }, 

    "obj1": { 
     "postTitle": "Post 2", 
     "postDate": "3/10/2015", 
     "backgroundImage": "https://cdn.scratch.mit.edu/static/site/users/avatars/328/6505.png" 
    }, 

    "obj2" : { 
     "postTitle": "Post 3", 
     "postDate": "12/3/2015", 
     "backgroundImage": "http://www.drodd.com/images10/cool-wallpapers18.jpg" 
    }, 

    "obj3" : { 
     "postTitle": "Post 4", 
     "postSubtitle": "check me out!", 
     "postDate": "4/6/2015", 
     "backgroundImage": "https://3.bp.blogspot.com/-twGb5CpYy1Y/UPUVtzb9iJI/AAAAAAAAAA8/_uMNLNFNy_w/s1600/ cool+backgrounds+for+microsoft+powerpoint.jpg" 
    } 

} 

Вам не нужно перебирать на этих объектах после вызова Ajax. Первым из них будет ваш «пост» var.

$.getJSON("../assets/scripts/posts.json", function(data) { 
    posts = data; 
});