如何根据ID单击的项目显示JSON文件中的数据 [英] How to show data from JSON file, based on clicked item by id

问题描述

Okey从哪里开始....

我正在构建我的电影库。我有两个页面，index和movie.html。

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 ='％20 +％20data [％20i％20] .id％20 + ％20 ' class =itemsHolder>' + 
  < div class = titleHolder  > + 
  < h2> + data [i] .name +  < / h2> + 
  < / div> + 
   < div class = novelAuthor  > +  < p class = NovelTxt  > +  新颖的 +   + data [i] .novel +  < / p> +  < / div>  + 
  < div class = posterHolder  > + data [i] .posterPath +  < / div> + 
  < div class = summaryShort  > + data [i]。摘要+  < / div> + 
  < div class = raiting  >< p> + data [i] .imdb +  < / p>< / div>< div class = genderMovie  &g吨;  + data [i] .gender +  < / div>  + 
  < div class = directorNdScreen  > + ' 由' +  < p class = director  > + data [i] .director + ' < / p>' + ' '  + ' 以' +   < p class = screenplay  > ; + data [i] .screenplay +  < / p> +  < / div> 
 
 
 +  < / a>）
} 
 
} 
  if （！data [i] .novel）{
 $（' ＃jsonLoad'）。append（' < a href =movies.html？id ='％20 +％20data [％20i％20] .id％20 +％20 '  class =itemsHolder>' + 
  < div class = titleHolder  > + 
   < h2> + data [i] .name +  < / h2> + 
  < / div> + 
  < div class = posterHolder  > + data [i] .posterPath +  < span class =code-string>< / div> + 
  < ; div class = summaryShort  > + data [i] .summary +  < / div> + 
   < div class = raiting  >< p> + data [i] .imdb +  < / p& gt;< / div>< div class = genderMovie  >  + data [i] .gender +  < / div>  + 
  < div class = directorNdScreen  > + '  Director by' +  < p class = director  > + data [i] .director + ' < / p>' + ' '  + ' 以' +   < p class = screenplay  > ; + data [i] .screenplay +  < / p> +  < / div> 
 
 
 +  < / a>）
} 
 
} 
}）
 
}）; 

假设我有一个像这样的JSON文件

 [
 {
   id： 1 ，
   name：  哥斯拉，
   imageStill： ，
}，
 {
   id： 2 ，
   na我： 变形金刚1，
   movieStill： ，
} 
] 

当我点击index.html中的项目时，在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] .movi​​eStill +  < / div> 
）
 
 
 
 } 
}）; 
 
 
}）; 

解决方案

（文档）.ready（ function （）{

.getJSON（ js / appjson.json， function （data）{
for （ var i = 0 ; i < data.length; i ++）{

for （ var key < span class =code-keyword> in data [i]）{

if （key === novel）{

（' #jsonLoad'）。append（' < a href =movies.html？id ='％20 +％20data [％20i％20] .id％20 +％20 ' class =itemsHolder>' +
< div class = titleHolder > +
< h2> + data [i] .name + < / h2> +
< / div> +
< div class = novelAuthor > + < p class = NovelTxt > + 小说 + < span class =code-string> + data [i] .novel + < / p> + < / DIV> +
< div class = posterHolder > + data [i] .posterPath + < / div> +
< div class = summaryShort > + data [i]。摘要+ < / div> +
< div class = raiting >< p> + data [i] .imdb + < / p>< / div>< div class = genderMovie &g吨; + data [i] .gender + < / div> +
< div class = directorNdScreen > + ' 由' + < p class = director > + data [i] .director + ' < / p>' + ' ' + ' 以' + < p class = screenplay > ; + data [i] .screenplay + < / p> + < / div>


+ < / a>）
}

}
如果（！数据[I]。新型）{

Okey where to start....
I am building my movie library.And i have two pages, index and movie.html.
Index.html will a page where will display movie items, each item, will have a name, a picture, score, short summary and director and screenplay names.And, also i will have a name from author, if the movie is based from book. All of that is taken from JSON file, that i have created locally.


In other html page, movie.html, i am planning to have more fancy design with more information. Like:wins, synopsis,cast and their characters, etc.

But here is the problem i am facing.

What I have tried:

I have this so far in 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='%20+%20data[%20i%20].id%20+%20'" 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='%20+%20data[%20i%20].id%20+%20'" 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>" )
            }

        }
    } )

} );

Lets say i have a JSON file like this

[
  {
    "id":1,
    "name": "Godzilla",
    "imageStill" :" ",
  },
{
    "id":2,
    "name": "Transformers 1",
    "movieStill" : " ",
  }
]

And when i click an item from index.html, in movie.html, i want to have one image.
The problem i have is that i have two images. Because, is taking images from both objects.

$( 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>"
                    )



        }
    } );


} );

解决方案

( 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='%20+%20data[%20i%20].id%20+%20'" 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){

这篇关于如何根据ID单击的项目显示JSON文件中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！