1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to get the value from id from URL and dynamically create content

Discussion in 'jQuery' started by Boklee, Sep 25, 2016.

  1. #1
    I really need your help. I have two htmls, index.html and movie html.
    In index.html, i have a script, that looks like this.
    $( 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>" )
            }
    
         }
       } )
    
    } );
    Code (JavaScript):
    I have JSON file locally and looks like this.
    [
    
    {
    "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'/>",\
    }
    ]
    Code (JavaScript):
    in my movie.html, i also have a script that looks like this.
    SEMrush
    $( 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>"
                    )
    
    
    
        }
    } );
    
    
    } );
    
    Code (JavaScript):
    My problem is that, it prints me two images, because i am looping in all objects. How can i do, to display the image based on clicked id? Like, if i click on one item, with id 1, to display properties from JSON file from one object, in this case, object 1, with id 1.
     
    Boklee, Sep 25, 2016 IP
    SEMrush