json配列の次の要素と前の要素を取得する

Question

私のコードで助けが必要です。私は前と次のボタンを持っています、これらは関数viewBlogItem（direction、cat、blogid）を呼び出します。

この関数では、jsonファイルを「カテゴリ」で分類して読み上げます。

すべてのblogItemにはarticleidとカテゴリがあります。次のボタンをクリックすると、次のblogItem.articleidを持っていて、それを表示したい（私はそれを追加します）。方向== "次"の場合は、カテゴリに次の項目があるかどうかを調べ、そうでなければ$（ '。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

後に他のブログがないことをどのように知ることができますか？

現在のブログの項目のインデックスを見て、参照次は、前の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>

ある配列の場合、または項目の数よりもより大きい場合