Почему не срабатывает ajax запрос к файлу data.json?

159

25 июня 2019, 20:00

Подскажите пожалуйста, почему не срабатывает ajax запрос к файлу data.json? Где ошибка? По идее должен был добавиться еще 1 блок, но почему-то ни в консоль ни в html данные не выводятся. путь к файл прописан правильно.

$( document ).ready(function() { 
$.ajax({url: "js/data.json"}).done(function(data){ 
    var json = data, 
      source = $('#blocks').html(), 
      template = Handlebars.compile(source), 
      html = template(json);     
      container.append(html); 
console.log("SUCCESS:", typeof data, data); 
  console.log(typeof data, data); 
}).fail(function(jqXHR, textStatus, errorThrown){ 
  console.log("ERROR:", textStatus, errorThrown); 
  console.log(jqXHR); 
}); 
 
});

.blogItem{ 
	max-width: 380px; 
	flex-grow: 1; 
	margin-left: 8px; 
	position: relative; 
	h5{ 
		font-size: 14px; 
		text-transform: uppercase; 
		font-family: MontserratReg,sans-serif; 
		color: #333; 
		margin-top: 15px; 
	} 
	p{ 
		max-width: 380px; 
		color: #999999; 
		font-family: roboto-example; 
		font-size: 15px; 
		font-weight: 400; 
		line-height: 24px; 
		padding-bottom: 40px; 
	} 
.comment_statistic{ 
		position: absolute; 
		bottom: 5px; 
		padding-top: 10px; 
		border-top: 1px solid #e5e5e5; 
		width: 100%; 
		font-size: 15px; 
		span{ 
			color: #999; 
		i{ 
			margin-left: 5px; 
			margin-right: 5px; 
		  color: $c_blue; 
		}} 
	} 
	.blog_img{ 
		position: relative; 
		img{ 
		width: 100%; 
		height: auto; 
	} 
	.post_date{ 
		background-color: $c_blue; 
		width: 60px; 
		height: 70px; 
		position: absolute; 
		left: -5px; 
		bottom: 10px; 
		text-align: center; 
		color: #fff; 
		font-size: 30px; 
		font-family: MontserratBold,sans-serif; 
		font-weight: bold; 
		span{ 
			font-size: 15px; 
			font-family: roboto-exampleIt,sans-serif; 
			position: absolute; 
			bottom: 5px; 
			left: 0; 
			right: 0; 
			color: #fff; 
		} 
	} 
 } 
} 
 
 
.blog_header{ 
	text-align: center; 
	background-color: grey; 
	width: 100%; 
	height: 200px; 
	background-image: url(../img/blogImg/bg.jpg); 
	background-repeat: repeat-x; 
	background-position: left 0; 
	h3{ 
		font-size: 50px; 
		padding-top: 20px; 
	} 
	.main_link{ 
		color: black; 
	} 
	ul{ 
		font-size: 20px; 
		margin-top: 20px; 
		margin-left: -40px; 
		}  
		li{ 
		display: inline-block;		 
	  } 
	  .active{ 
	  	color: $text_grey; 
	  } 
	  li:nth-child(2):before{ 
			content: '\2022'; 
			display: inline-block; 
			font-size: 20px; 
			margin-right: 5px; 
	  } 
} 
 
.wrapper-articles{ 
	display: flex; 
	justify-content: space-around; 
	flex-wrap: wrap; 
	margin-top: 100px; 
}

<header class="blog_header"> 
	<h3>Блог</h3> 
	<ul> 
		<li><a class="main_link" href="index.html">На главную</a></li> 
		<li class="active">Блог</li> 
	</ul> 
</header> 
 
 
<section class="articles"> 
	<div class="wrapper wrapper-articles"> 
		 
		<a href="blog/article.html" class="blogItem"> 
			<div class="blog_img"> 
				<img src="http://kherson.life/wp-content/uploads/2015/12/mobilki.jpg" alt="" class="blogImg"> 
				<div class="post_date">15<br><span>Jan</span></div> 
			</div> 
			<h5>Что популярнее: сайты или приложения</h5> 
			<p>Нарастающая популярность мобильных устройств для серфинга в интернете изменила онлайн-ландшафт от начала и до конца. Если верить статистике, предложенной Smart Insights, 70% поиск...</p> 
			<div class="comment_statistic"> 
				<span><i class="fas fa-eye"></i>542</span> 
				<span><i class="fal fa-comment-dots"></i>17</span> 
			</div> 
		</a>	 
 
 
	</div> 
</section> 
 
 
<script id="blocks" type="text/x-handlebars-template"> 
{{#each blocks}} 
		<a href="{{post_link}}" class="blogItem"> 
			<div class="blog_img"> 
				<img src="{{src}}" alt="" class="blogImg"> 
				<div class="post_date"><br>{{date}}<span>{{month}}</span></div> 
			</div> 
			<h5>{{articleTitle}}</h5> 
			<p>{{articleText}}</p> 
			<div class="comment_statistic"> 
				{{#each statistic}} 
				<span><i class="fas fa-eye"></i>{{views}}</span> 
				<span><i class="fal fa-comment-dots"></i>{{comments}}</span> 
			</div>	 
		</a> 
{{/each}} 
</script> 
 
 
	<script src="libs/jquery/dist/jquery.min.js"></script> 
	<script src="js/handlebars.js"></script> 
	<script src="js/common.js"></script>

\\\\\\\\\\\\\\data.json

{
  "blocks":[
    {
    "post_link":"blog/article.html"
    },
    {
      "blogImg":[
        {
          "src":"img/blog/blog1.jpg"
        },
        {
          "date":"15",
          "month":"Jan"
        }
      ],
      "articleTitle": "Что популярнее: сайты или приложения",
      "articleText": "Нарастающая популярность мобильных устройств для серфинга в интернете изменила онлайн-ландшафт от начала и до конца. Если верить статистике, предложенной Smart Insights, 70% поиск...",
      "statisctic": [
        {
        "views":"542"
        },
        {
        "comments":"17"
        }
      ]
    }
  ]
}

Answer 1

$.ajax({
  url: "js/data.json"
}).done(function(data){
  console.log("SUCCESS:", typeof data, data);
}).fail(function(jqXHR, textStatus, errorThrown){
  console.log("ERROR:", "[", textStatus, "]", "[", errorThrown, "]");
  console.log(jqXHR);
});