如何根据ID单击的项目显示JSON文件中的数据

本文介绍了如何根据ID单击的项目显示JSON文件中的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 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 + < / 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 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>）} } 如果（！数据[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文件中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！