Getting next and previous element of json array

Question

I need help with my code. I want to have a previous and a next button, these will call a function viewBlogItem(direction,cat,blogid);

in that function i'll be reading out the json file, categorizing by the "category".

Every blogItem has a articleid and a category, if click the next button I want to have the next blogItem.articleid and have that one shown (I use append for that one). If the direction == "next", then it look if it has a next item in category, if not then hide $('.next'). Same goes for previous button $('.previous')

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;
                }
            });
        });
    }

I would also like to have some suggestions for the structure my json.

Answer 1

How can I tell that there ain't another blog after or previous?

Look at the index of the current blog item and see if the next one is bigger than than the number of items in the array or if the previous one is less than 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>