CODEWITHSUNDEEP
javascriptjqueryjson
GettingStarted
GettingStarted

Reputation: 7625

how to dynamically change data based on JSON file using jQuery

<div id="rightside">
            <h1>Name Of Person</h1>
            <p>1900-1950
                <p><a href="linktowiki">Learn More</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at
                        convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
                    <p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
                    <button>Pause</button>
        </div>

my div looks like this. I want to replace it with data that I am getting from a JSON file. However I only want to show 1 entry at a time and make it animate between entries (does not need to be fancy).

My question is how can I get jQuery to change between my JSON data?

My JSON data looks like

[
  {
    "name": "Elizabeth Cady Stanton",
    "image": "media/images/elizabeth.jpg",
    "year": "1815 – 1902",
    "wikilink": "https://en.wikipedia.org/wiki/Elizabeth_Cady_Stanton",
    "article": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor. Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nil."
  },

I would appreciate any help or links to examples.

Thanks

Upvotes: 2

Views: 168

Answers (3)

Kunal Gadhia
Kunal Gadhia

Reputation: 370

Your problem can be solved by this:

HTML:

<div id="rightside">
<h1 id="nameOfPerson"></h1>
 <p id="year">
 </p>
<a id="wikiLink">Learn More</a>
<p id="article"></p>
<p></p>
<button id="fill">Start</button>
</div>

JQuery :

var dataObject = [{
"name": "Elizabeth Cady Stanton",
"image": "media/images/elizabeth.jpg",
"year": "1815 – 1902",
"wikilink": "https://en.wikipedia.org/wiki/Elizabeth_Cady_Stanton",
"article": "Whole Article"
}];

$("#fill").click(function() {
setData(dataObject);
});

var setData = function(data) {
$.each(data, function(index, mainData) {
$("#nameOfPerson").text(mainData.name);    
$("#year").text(mainData.year);
$("#wikiLink").attr("href",mainData.wikilink);
$("#article").text(mainData.article)
});

};

By this code your data will be rendered dynamically. For Demo you can check my fiddle : Fiddle Link Here

Upvotes: 0

Jobelle
Jobelle

Reputation: 2834

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<script>
    $(document).ready(function () {
        var yourJsonData = '[{"name": "Elizabeth Cady Stanton","image": "media/images/elizabeth.jpg","year": "1815 – 1902","wikilink": "https://en.wikipedia.org/wiki/Elizabeth_Cady_Stanton",            "article": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor. Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nil."}]'
        var obj = JSON.parse(yourJsonData);
        $('#rightside').find('h1:first').text(obj[0].name);
        $('#rightside').find('p:first').text(obj[0].year);
        $('#rightside').find('a:first').attr('href', obj[0].wikilink)
        $('#rightside').find('p:eq(3)').text(obj[0].article)
    });


</script>



<body>
  <div id="rightside">
            <h1>Name Of Person</h1>
            <p>1900-1950
                <p><a href="linktowiki">Learn More</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at
                        convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
                    <p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
                    <button>Pause</button>
</div>
 </body>
</html>

Upvotes: 0

Jimish Gamit
Jimish Gamit

Reputation: 1024

Added data-index to track data index that we are showing

<div id="rightside" data-index='-1'>..</div>

It will change your data after every 5 seconds in rotating manner.

setTimeout(function(){
        var yourJsonData = [{"name":"Elizabeth Cady Stanton","image":""media/images/elizabeth.jpg"},{"name":"Elizabeth Cady Stanton","image":""media/images/elizabeth.jpg"}];
        var currentIndex = $("#rightside").attr('data-index');
        var totalLengthOfData = yourJsonData.length;
        var indexToShow = currentIndex+1;
        if(indexToShow > totalLengthOfData){
           indexToShow=0;
        }
        $("#rightside").attr('data-index',indexToShow);
        var dataToAppend =  yourJsonData[indexToShow];

        $("#rightside").children().remove();
        $("#rightside").append("<h1>"+yourJsonData['name']+"</h1>").
                        append("<p>"+yourJsonData['year']+"</p><p><a href='"+yourJsonData['linktowiki']+"'>learn more</a></p>"); 

     },5000);

haven't tested the code yet

Upvotes: 1

Related Questions