how to dynamically change data based on JSON file using jQuery

Question

<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

Your HTML is malformed. The first two <p> tags don't have matching end tags. — Hydrothermal
– Hydrothermal, Commented Feb 12, 2016 at 4:13
Thank you but would would you be able to help with the jquery bit? — GettingStarted
– GettingStarted, Commented Feb 12, 2016 at 4:18

Jimish Gamit · Accepted Answer · 2016-02-12 04:18:15Z

1

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

answered Feb 12, 2016 at 4:18

Jimish Gamit

1,0345 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GettingStarted Over a year ago

Is the JSON data going to be coded with the JavaScript?

Jimish Gamit Over a year ago

I believe data is coming from server side so you can make ajax request to get your JSON data

Hydrothermal Over a year ago

@softwareisfun If your JSON data is coming from your server, an API, a file, or otherwise being delivered in string format, use var yourJsonData = JSON.parse([JSON string]);.

Jobelle · Accepted Answer · 2016-02-12 04:55:15Z

<!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>

Kunal Gadhia · Accepted Answer · 2016-02-12 08:47:05Z

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

Collectives™ on Stack Overflow

how to dynamically change data based on JSON file using jQuery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related