Getting data from JSON file based on clicked item by id

Question

Because my other question, didn't solved my issue, and i tried everything what i know, and every time i am getting more stuck. Please combine this question with my other.

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='+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>" )
        }

     }
   } )

 } );

My JSON file, i have 20 objects, i will post just 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'/>",\
 }
 ]

And my movie.html looks like this.

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



    }
} );


} );

I know in my movie.html i loop in every object. How can i write an if statement, that will take per one object with own id, and display what is there.

Here, when i click on Harry potter 1 item, i got two images, from hp1 and hp2, i just want to show only the one value from item i have clicked. And this means also for the rest of the properties, like different director etc, just to name a few.

Can't find the info I was looking for but I think that the root of your JSON needs to be an object not an array. — NickSlash, Sep 24 '16 at 19:39
Like universal object, and objects inside it? Like this { { }, { } } — Bokchee 88, Sep 24 '16 at 19:45
@NickSlash, it can be a representation of array, object, or any primitive value, ie all the following are valid JSON: `"[]"`, `"{}"`,`"1"`,`"true"` — Patrick Evans, Sep 24 '16 at 19:50
`'%20+%20data[%20i%20].id%20+%20'` is invalid, why do you have url encodings in there? Should just be `'+ data[i].id +'` — Patrick Evans, Sep 24 '16 at 19:56
No idea from where that came from. So any idea how to fix this> — Bokchee 88, Sep 24 '16 at 20:12
You have a lot of `"` inside `"`. Did you check developer console for errors? — sabithpocker, Sep 24 '16 at 20:19
Yeah, i checked, re checked, nothing shows me as an error, it just show me two images, and that's it — Bokchee 88, Sep 24 '16 at 20:24

score 0 · Answer 1 · answered Sep 24 '16 at 20:25

It looks like in your movie.html you are just appending the images to .MovieInfo, which would not separate them out but have them all lumped together. You can instead read the id of from the data argument and only display the id associated with the movie you clicked.

Since you are already passing in a GET query to the url (movies.html?id=) you can just grab the value of id from the GET query and start with that (let's call it getID() for now). Afterwards just wrap the .MovieInfo append statement with an if statement checking the data argument for that value.

$.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>"
            )
        }
    }
});

Thanks a lot, but i am sorry, i am not familiar with getting the value from url, How would i do that? — Bokchee 88, Sep 24 '16 at 21:06
http://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters — Austin Ewens, Sep 29 '16 at 23:20

Getting data from JSON file based on clicked item by id

1 Answers1