Как подключить JSON?

Question

Есть такой код, необходимо вынести JSON одним файлом, как это лучше сделать?

$('.more').on('click', function(){
    let json2 = '{"items":[{"name":"10 причин приехать отдыхать в Бурятию на отпуск","description":"Рассказываем о главных особенностях Бурятии","date":"12 мая 2020 года","images":"images/news/culture/1.png"},{"name":"10 причин приехать отдыхать в Бурятию на отпуск","description":"Рассказываем о главных особенностях Бурятии","date":"12 мая 2020 года", "images":"images/news/culture/2.png"}]}';
    DrawItems(json2);
    $.ajax({
        type:'GET',
        url:'',
        async:true,
        // data:{},
        success:function(json){
            DrawItems(json)
        },
        error:function(error){
            console.log(error);
        }
        
    })
 });

 function DrawItems(json){
     let data = JSON.parse(json);
     data.items.forEach(element => {
         $('.news-grid-list').append('<div class="item"><a href="" class="image video-culture"><img src="'+ element.images +'"></a><a class="videos__play"></a><div class="info"><a href="" class="title">'+ element.name +'</a><div class="des">'+ element.description +'</div><div class="date">'+ element.date +'</div></div></div>');
     });
     $('.more').remove();
 }

Answer 1

в смысле вы хотите убрать json в файл и загружать его оттуда аяксом?

$(".more").click(function(){
    $.getJSON("/path/to.json", drawTimes);
});

так что ли?

JSON.parse только убрать надо, он там не нужен уже.

Answer 2

Создаёте файл

/object.json

{
  "items": [
  {
    "name": "10 причин приехать отдыхать в Бурятию на отпуск",
    "description": "Рассказываем о главных особенностях Бурятии",
    "date": "12 мая 2020 года",
    "images": "images/news/culture/1.png"
  },
  {
    "name": "10 причин приехать отдыхать в Бурятию на отпуск",
    "description": "Рассказываем о главных особенностях Бурятии",
    "date":"12 мая 2020 года",
    "images":"images/news/culture/2.png"
  }]
}

Далее следующий код вместо вашего:

let isDissabled = false;
$('.more').on('click', function(){
  if(isDisabled === false) {
    isDisabled = true;
    $.ajax({
      type: 'GET',
      url: '/object.json',
      async:true,
      dataType: 'json',
      success: function(json) {
        DrawItems(json);
        isDisabled = false;
      },
      error: function(error) {
        console.log(error);
      }  
    });
  } else return false;
});

function DrawItems(data) {
  let element = data.items;
  for(let i = 0; i < element.length; i++) {
    $('.news-grid-list').append(`<div class="item">
            <a href="" class="image video-culture">
                <img src="${element[i].images}">
            </a>
            <a class="videos__play"></a>
            <div class="info">
                <a href="" class="title">${element[i].name}</a>
                <div class="des">${element[i].description}</div>
                <div class="date">${element[i].date}</div>
            </div>
        </div>`);
  }
  $('.more').remove();
}

БЛОГ НА HUSL

Как подключить JSON?

Ответы (2 шт):