Получение следующего и предыдущего элемента массива json

Question

Мне нужна помощь с моим кодом. Я хочу иметь предыдущую и следующую кнопку, они вызовут функцию viewBlogItem (direction, cat, blogid);

В этой функции я буду читать json-файл, классифицируя по «категории».

Каждый blogItem имеет articleid и категорию, если щелкнуть следующую кнопку, я хочу иметь следующий blogItem.articleid и показать это (я использую append для этого). Если направление == «next», то оно выглядит, если у него есть следующий элемент в категории, если нет, тогда скройте $ ('. Next'). То же самое относится и к предыдущей кнопки $ (». Предыдущий)

blogItems.json

{ 
    "blogItem":[ 
    { 
     "id": 1, 
     "title": "animals blog 1", 
     "category":"animals", 
     "text":"text", 
     "articleid":1 
    }, 
    { 
     "id": 2, 
     "title": "lifestyle blog 1", 
     "category":"lifestyle", 
     "text":"text", 
     "articleid": 1 
    }, 
    { 
     "id": 3, 
     "title": "animals blog 2", 
     "category":"animals", 
     "text":"text", 
     "articleid": 2 
    }, 
    { 
     "id": 5, 
     "title": "animals blog 4", 
     "category":"dieren", 
     "text":"text", 
     "articleid":4 
    }, 
    { 
     "id": 4, 
     "title": "animals blog 5", 
     "category":"animals", 
     "text":"text", 
     "articleid":3 
    } 
    ] 
} 

JQuery

function viewBlogItem(direction,cat,blogid) { 
      var id = ""; 
      if(direction == "next"){ 
       // code for showing next blogitem 
       //if no next then 
       $('').hide(); 
      } 
      else{ 
       // if no previous then hide 
       //code for showing previous blogitem 
      } 
      loadBlog(id); 
     } 

    function loadBlog(blogid){ 
     $.getJSON('blogitems.json', function (data) { 
      $.each(data.blogItem, function (i, item) { 
       if (item.id == blogid) { 
        $('.view').append('all sorts of stuff'); 
        return; 
       } 
      }); 
     }); 
    } 

Я хотел бы иметь некоторые предложения по структуре мой JSon.

Answer 1

Как я могу сказать, что после или предыдущего нет другого блога?

Посмотрите на индекс текущего элемента блога и посмотреть, если следующий один больше, чем, чем количество элементов в массиве или если предыдущая меньше 0.

var blogs = { 
 
    "blogItem": [{ 
 
     "id": 1, 
 
     "title": "animals blog 1", 
 
     "category": "animals", 
 
     "text": "text", 
 
     "articleid": 1 
 
    }, { 
 
     "id": 2, 
 
     "title": "lifestyle blog 1", 
 
     "category": "lifestyle", 
 
     "text": "text", 
 
     "articleid": 1 
 
    }, { 
 
     "id": 3, 
 
     "title": "animals blog 2", 
 
     "category": "animals", 
 
     "text": "text", 
 
     "articleid": 2 
 
    }, { 
 
     "id": 5, 
 
     "title": "animals blog 4", 
 
     "category": "dieren", 
 
     "text": "text", 
 
     "articleid": 4 
 
    }, { 
 
     "id": 4, 
 
     "title": "animals blog 5", 
 
     "category": "animals", 
 
     "text": "text", 
 
     "articleid": 3 
 
    }] 
 
}; 
 

 
var index = 0; 
 
var item = blogs.blogItem[index]; 
 

 
var title = document.getElementById('title'); 
 
var text = document.getElementById('text'); 
 
var previous = document.getElementById('previous'); 
 
var next = document.getElementById('next'); 
 

 
displayItem(item); 
 

 
previous.addEventListener('click', function() { 
 
    displayItem(blogs.blogItem[--index]); 
 
}); 
 

 
next.addEventListener('click', function() { 
 
    displayItem(blogs.blogItem[++index]); 
 
}); 
 

 
function displayItem(item) { 
 
    title.innerText = item.title; 
 
    text.innerText = item.text; 
 
    previous.disabled = index <= 0; 
 
    next.disabled = index >= blogs.blogItem.length -1; 
 
}

[disabled] { 
 
    opacity: 0.5; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div> 
 
    <div id="title"></div> 
 
    <div id="text"></div> 
 
    </div> 
 
    <button id="previous">Previous</button> 
 
    <button id="next">Next</button> 
 
</div>