idでクリックしたアイテムに基づいてJSONファイルからデータを取得

Question

私の他の質問は私の問題を解決しなかったので、私は何を知っているのか試してみました。この質問を私の他のものと組み合わせてください。

私はムービーライブラリを構築しています。インデックスとmovie.htmlという2つのページがあります。 Index.htmlムービーアイテムを表示するページ、各アイテムには名前、画像、スコア、短いサマリー、ディレクター、脚本の名前が表示されます。また、ムービーがベースの場合は作者の名前も表示されます本から。そのすべては、私がローカルで作成したJSONファイルから取得されます。

他のhtmlページのmovie.htmlでは、私はより多くの情報をもってより洗練されたデザインを予定しています。同じように：勝利、概要、キャストとそのキャラクターなど

しかし、私は直面している問題です。私が試してみました何

：

を、私は、この今のところ index.htmlを

$(document).ready(function() { 

$.getJSON("js/appjson.json", function (data) { 
    for (var i = 0; i < data.length; i++) { 

     for (var key in data[ i ]) { 

      if (key === "novel") { 
       $('#jsonLoad').append('<a href="movies.html?id='+data[i].id'" class="itemsHolder">' + 
       "<div class="titleHolder">" + 
       "<h2>" + data[ i ].name + "</h2>" + 
       "</div>" + 
       "<div class="novelAuthor">" + "<p class="NovelTxt">" + "Novel by" + " " + data[ i ].novel +"</p>" + "</div> " + 
       "<div class="posterHolder">" + data[ i ].posterPath + "</div>" + 
       "<div class="summaryShort">" + data[ i ].summary + "</div>" + 
       "<div class="raiting"><p>" + data[ i ].imdb + "</p></div><div class="genderMovie"> " + data[ i ].gender + "</div> " + 
       "<div class="directorNdScreen">" + 'Directed by ' + " <p class="director">" + data[ i ].director + '</p>' + ' ' + ' Screenplay by ' + "<p class="screenplay">" + data[ i ].screenplay + "</p>" + "</div>" 


       + "</a>") 
      } 

     } 
     if(!data[i].novel){ 
      $('#jsonLoad').append('<a href="movies.html?id='+data[i].id+'" class="itemsHolder">' + 
      "<div class="titleHolder">" + 
      "<h2>" + data[ i ].name + "</h2>" + 
      "</div>" + 
      "<div class="posterHolder">" + data[ i ].posterPath + "</div>" + 
      "<div class="summaryShort">" + data[ i ].summary + "</div>" + 
      "<div class="raiting"><p>" + data[ i ].imdb + "</p></div><div class="genderMovie"> " + data[ i ].gender + "</div> " + 
      "<div class="directorNdScreen">" + 'Director by ' + " <p class="director">" + data[ i ].director + '</p>' + ' ' + ' Screenplay by ' + "<p class="screenplay">" + data[ i ].screenplay + "</p>" + "</div>" 


      + "</a>") 
     } 

    } 
    }) 

}); 

私のJSONファイルで、私は20個のオブジェクトを持っている、私はちょうど2

[ 

{ 
"id": 1, 
"name": "Harry potter and the Sorcerer's Stone", 
"year": 2001, 
"movieStill" : " <img src='imgsMovie/HP1/StillPhoto/StillPhotoBackground.jpg'/>",\ 
}, 
{ 
"id": 2, 
"name": "Harry potter and the Chamber of Secrets ", 
"year": 2001, 
"movieStill" : " <img src='imgsMovie/HP2/StillPhoto/StillPhotoBackground.jpg'/>",\ 
} 
] 

を掲載します

私のmovie.htmlはこのように見えます。

$(document).ready(function() { 

$.getJSON("js/appjson.json", function (data) { 


     for (var i = 0; i < data.length; i++) { 

       $('.MovieInfo').append(
        "<div class="imgStill">" + data[ i ].movieStill + "</div>" 
       ) 



    } 
}); 


}); 

私はすべてのオブジェクトで私のmovie.htmlループを知っています。 どのようにすれば、自分のidを持つオブジェクトごとに取るif文を記述し、そこに何があるかを表示できます。

ここで、私がHarry potter 1アイテムをクリックすると、hp1とhp2から2つのイメージが得られます。 クリックしたアイテムの1つの値だけを表示したいだけです。そして、これは他のディレクターなどのプロパティの残りの部分についても同様です。

Answer 1

あなたのmovie.htmlのように見えるのは、画像を.MovieInfoに追加しているだけなので、それらを切り離すことはありませんが、それらはすべて一緒にまとめられます。代わりに、data引数からidを読み込み、クリックしたムービーに関連付けられたIDのみを表示することができます。

すでにGETクエリをURL（movies.html？id =）に渡しているので、GETクエリからidの値を取得して開始することができます（今はgetID（）としましょう） 。その後、.MovieInfo append文をif文でラップして、その値のデータ引数をチェックします。

$.getJSON("js/appjson.json", function (data) { 
    for (var i = 0; i < data.length; i++) { 
     if (data[i].id === getID()) { 
      $('.MovieInfo').append(
       "<div class="imgStill">" + data[ i ].movieStill + "</div>" 
      ) 
     } 
    } 
});