Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

JSON Array not displaying correct content on link click

json jqeury html css

This topic has been archived. This means that you cannot reply to this topic.
No replies to this topic

#1 Darian

Darian

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 21 February 2017 - 06:07 AM

I was hoping that someone with more knowledge than me could help!
 
I am bringing in JSON data via Ajax & Jquery. I have loaded up the data and the objects are as follows -
 
ID,
TITLE,
PERMALINK,
CONTENT, 
ETC.(The rest is not important)
 
I am trying to display EACH CONTENT object separately based on the link that you click. So if the link has a specific ID, then the CONTENT object in THAT array will display.
 
But what I am getting is - On every link I click, it displays the same CONTENT object no matter what.
 
I have attached the code snippets for you to look at and hopefully you see the problem, because I definitely cant.
 
I would really appreciate the help. Otherwise I might just rip my hair out. 
 
CODE -
 
<!DOCTYPE html>
<html>
    
<head>
    <meta charset="utf-8">
    <title>Rugby Thumbnails</title>
    <link href="css/styles.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/main2.js"></script>
</head>
    
<body>

    
</body>
</html>

/*JSON OBJECT EXAMPLE
[{"id":58543,"title":"Art@Almenkerk brings contemporary art to the wine estate","permalink":"http:\/\/www.capetownetc.com\/blog\/artalmenkerk-brings-contemporary-art-wine-estate\/","content":"With its spectacular views and award-winning wine, a trip to Almenkerk Wine Estate in Elgin is well worth it. But in case you need extra incentive to make the trip, they have recently opened a gallery and sculpture garden filled with exquisite contemporary art from local and international artists.\r\n\r\n<img class=\"size-full wp-image-58552 aligncenter\" src=\"http:\/\/www.capetownetc.com\/wp-content\/uploads\/2017\/02\/Almenkerk-2.jpg\" alt=\"\" width=\"650\" height=\"441\" \/>\r\n\r\nThe brainchild of Dirk Durnez and curated by Gordon Ground, the grounds, cellar and tasting rooms of the estate have been transformed by incredible art pieces. The exhibition as a whole it titled <i>Mute Wisdom. <\/i>According to Gordon, this is to show how an inanimate \u2018mute\u2019 object can exude its own form of wisdom as soon as you engage with it. From large scale sculptures to intricate paintings, the assumingly eclectic mix of art has been carefully chosen and placed to tell its own narrative.\r\n\r\n&nbsp;\r\n\r\nOne of the most impressive parts of the exhibition is an old barn that has been converted into a gallery. Lined with gigantic cones, the old school building combines with contemporary artworks creates an interesting juxtaposition. Inside, you'll find several sculptures and paintings beautifully displayed behind glass. After a visit to the barn, take a walk up to the tasting room, where you can sample the Almenkerk wines. On your way there you will see some incredible sculptures, including a gigantic red poodle, wire sculptures and in the distance a huge blue penguin.\r\n\r\n<img class=\"size-full wp-image-58551 aligncenter\" src=\"http:\/\/www.capetownetc.com\/wp-content\/uploads\/2017\/02\/Almenkerk-5.jpg\" alt=\"\" width=\"650\" height=\"867\" \/>\r\n\r\nWith a glass of wine in hand (I recommend the Chardonnay, especially on a hot Summer day), you can wander the rest of the estate taking the views and art. At every turn, you will find something to marvel at. Some of my favourite pieces included a brass sculpture of a women in a closed off garden, a stained glass window hanging in the cellar and a small wolf like sculpture titled the <em>Trickster<\/em>\u00a0tucked in the corner of\u00a0the tasting room. With such a diverse collection, you are sure to find a few pieces that speak to you too.\r\n\r\n&nbsp;\r\n\r\nThe owners of the estate, Joris and Natalie Almenkerk are excited to work with Dirk to bring\u00a0art to their beautiful estate. Not only does it add to their property, it also adds to Elgin as a whole, giving visitors to the region a new experience to enjoy when they are in the area. Natalie says:\r\n\r\n<img class=\"size-full wp-image-58548 aligncenter\" src=\"http:\/\/www.capetownetc.com\/wp-content\/uploads\/2017\/02\/Almenkerk-6.jpg\" alt=\"\" width=\"650\" height=\"867\" \/>\r\n\r\n\u2018We have the space and the environment and Joris and I both love art, so we decided to play with the idea of bringing quality contemporary art to on to the estate.\u2019\r\n\r\n&nbsp;\r\n\r\nThis has all come to fruition thanks to Dirk, who is an Impresario for eh Art @ franchise, that looks to pair quality wine and art creating a meaningful experience. <i>Mute Wisdom<\/i> will be on display for the next six months until the end of June 2017 and then will be changed in this ongoing project.\r\n\r\n<img class=\"size-full wp-image-58550 aligncenter\" src=\"http:\/\/www.capetownetc.com\/wp-content\/uploads\/2017\/02\/Almenkerk-3.jpg\" alt=\"\" width=\"650\" height=\"488\" \/>\r\n\r\n<b>OF NOTE\r\nWhen <\/b>Tuesdays \u00ad\u00ad\u2013 Sundays 10 am<b> \u00ad<\/b>\u00ad\u00ad- 4 pm (Closed on Sundays during Winter) <b>\r\nWhere <\/b><a href=\"https:\/\/www.google.co.za\/maps\/place\/Almenkerk+Wine+Estate\/@-34.211731,19.0303373,17z\/data=!3m1!4b1!4m5!3m4!1s0x1dcdc53ca78380bd:0x4352e854940fa46!8m2!3d-34.211731!4d19.032526\" target=\"_blank\">Almenkerk Wine Estate, 50 Viljoenshoop Road, Elgin<\/a><b>\r\nContact <\/b>+27 21\u00a0848 9844, <a href=\"mailto:info@almenkerk.co.za\" target=\"_blank\">info@almenkerk.co.za<\/a>,\u00a0<a href=\"http:\/\/www.almenkerk.co.za\/\" target=\"_blank\">almenkerk.co.za<\/a>\r\n\r\n<strong>Photography<\/strong> Annzra Denita\r\n\r\n&nbsp;","excerpt":"With its spectacular views and award-winning wine, a trip to Almenkerk Wine Estate in Elgin is well worth it. But in case you need extra incentive to make the trip, they have recently opened a gallery and sculpture garden filled with exquisite contemporary art from local and international artists. The brainchild of Dirk Durnez and curated by Gordon Ground, the...<span class=\"path-read-more\"><a class=\"more-link\" href=\"http:\/\/www.capetownetc.com\/blog\/artalmenkerk-brings-contemporary-art-wine-estate\/\" title=\"Art@Almenkerk brings contemporary art to the wine estate\">  Read more &rarr; <\/a><\/span>","date":"2017-02-20 10:00:34","author":"Annzra Denita","thumbnail":"http:\/\/www.capetownetc.com\/wp-content\/uploads\/2017\/02\/Almenekerk-FI.jpg 650w, http:\/\/www.capetownetc.com\/wp-content\/uploads\/2017\/02\/Almenekerk-FI-600x400.jpg 600w","categories":["blog","CULTURE"],"tags":["art","arts","cape town etc","capetown etc","CapeTownEtc","culture","elgin","getaways","sculpture","wine"]}
*/
.content-wrap {
	display: flex;
    flex-direction: row;
}

.title{
    display: table;
    margin: 0 auto;
    font-family: sans-serif;
    font-size: 20px;
    color: #398d46;
}

strong{
    display: block;
}

.content{
    margin-top: 20px;
    font-family: sans-serif;
    color: #333;
}

.thumb{
    display: block;
    margin: 20px auto;
    height: auto;
}

.excerpt{
    font-family: sans-serif;
    color: #333;
    text-align: justify;
}

.back{
    text-decoration: none;
    font-family: sans-serif;
    font-size: 20px;
    color: darkred;
    position: absolute;
    top: 0;
}
$.ajax({ 
    type: 'GET', 
    url: 'data.json', 
    data: { get_param: 'value' }, 
    dataType: 'json',
    success: function (data) {
        
        $.each(data, function(i, element) {
            var link = $('.more-link');
            
            var cont = "<div class='content'>" + data[i].content + "</div>";
            
            var back = "<a class='back' href='http://localhost:8888/postPopulate/Feb21.8.23AM'>BACK</a>";
            var thumb = "<img class='thumb' src=" + data[i].thumbnail + ">";
            
            var title = "<h1 class='title'>" + data[i].title + "</h1>";
            
            var exc = "<p class='excerpt'>" + data[i].excerpt + "</p>";
            var perma = JSON.stringify(data[i].permalink);
            

                perma = perma.replace("http://www.capetownetc.com/blog/", "");
                perma = perma.replace("http://www.capetownetc.com/events/", "");
                perma = perma.replace("http://www.capetownetc.com/mykitchen/", "");
                $(link).attr("href", "http://localhost:8888/postPopulate/Feb21.8.23AM/#" + perma);

            
            console.log(perma);
            

                $(link).click(function(){
                    $('body').html(cont);
                    $('body').append(back);
                });
                
                
                
            
            $('body').append(title);
            $('body').append(thumb);
            $('body').append(exc);
            
        });//END OF FOR LOOP
    }//END OF SUCCESS FUNC
});//END OF AJAX


//SNIPPETS

//console.log(element.id);


//var link = ('.more-link');
//var title = "<h1 class='title'>" + data[0].title + "</h1>";
//            var thumb = "<img class='thumb' src=" + data[0].thumbnail + ">";
//var exc = "<p class='excerpt'>" + data[0].excerpt + "</p>";            
//            $('.thumbnail').click(function(){
//                $('body').html(title);
//                $('body').append(thumb);
//                $('body').append(exc);
//                $(link).attr("href", "http://localhost:8888/Practice1/Task1-Feb17/#");
//            });


//var cont = "<div class='content'>" + data[4].content + "</div>";
//            
//            $('body').html(cont);

 






Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download