Получение данных из файла JSON на основе щелкнутого элемента по id

Question

Потому что мой другой вопрос не решил мою проблему, и я пробовал все, что знаю, и каждый раз, когда я становлюсь более застрявшим. Объедините этот вопрос с другим.

Я строю свою библиотеку фильмов. И у меня есть две страницы, 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='+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>" 
       ) 



    } 
}); 


}); 

Я знаю в своем фильме.html i loop в каждом объекте. Как я могу написать оператор if, который будет принимать один объект с собственным идентификатором и отобразить, что там есть.

Здесь, когда я нажимаю на Гарри Поттер 1 элемент, у меня два изображения, из hp1 и hp2, Я просто хочу показать только одно значение из пункта, который я нажал. А это значит и для остальных свойств, как и у разных режиссеров и т. Д., Просто для того, чтобы назвать несколько.

Answer 1

Похоже, что в вашем movie.html вы просто добавляете изображения в .MovieInfo, которые не будут их разделять, но все они собраны вместе. Вместо этого вы можете считывать идентификатор из аргумента данных и отображать только идентификатор, связанный с кликом, который вы нажали.

Поскольку вы уже передаете запрос GET на url (movies.html? Id =), вы можете просто захватить значение id из запроса GET и начать с этого (назовем его getID() сейчас) , После этого просто заверните оператор app .MovieInfo с помощью оператора 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>" 
      ) 
     } 
    } 
});