JSON data display problems

Question

currently I'm trying to get a html page with javascript in it to retrieve and display JSON from a website but I've run into a couple of problems.

The user clicks a button and the website retrieves data from 5 links and displays the data contained within the JSON. Said data looks like this:

LINK 0    
    { "Genre": "Fantasy", "Title": "Book1" }

LINK 1
    { "Genre": "sciFi", "Title": "Book2"}

First of all I can retrieve and display the data, but the way I want to do it is that no data will be displayed twice. Currently my code repeats 5 times, iterating through the links but displaying all the previous links as well so I get this:

Book1 Book1 Book2 book1 Book2 Book3 book1 Book2 Book3 Book4 Book1 Book1 Book2 book1 Book2 Book3 book1 Book2 Book3 Book4 Book5

When I just want:

Book1 Book2 Book3 Book4 Book5

After the button is clicked, if it is clicked again it should display 5 more sections of data from the next 5 links. so the output should be: Book6 Book7 Book8 Book9 Book10.

I've tried many different variations of my code to fix this but nothing's worked and the longer I try to fix it the more confused I end up becoming. This is the current state of my code:

<html>

    <head>

        <title>JSON-TEST</title>  

<script>

var jnodes = [] ;
var curr_line = 0;
var currentSet = 0;
var endSet = currentSet + 5;

function get_data()
{
    request= new XMLHttpRequest();

    request.open("GET","http://example.com/",true);

    request.onreadystatechange=function()
    {
        if(request.readyState==4 && request.status==200)
        {

            var json_no_chapters= JSON.parse(request.responseText);

            reply=JSON.parse(request.responseText);

            add_nodes(reply);
        }
    }
    request.send()
} 

function getsets(page_from,page_to)
{
    var i = currentSet;
    while (i < endSet) 
    {    
        alert('get set '+i);   // Can't figure out how to do this without alert. everything falls apart without it.
        getset(i);  

        i++;
    }

    currentSet = page_to + 1;
    endSet = currentSet + 5;
}

function getset(pageno)
{
    request= new XMLHttpRequest();
    request.open("GET","http://example.com/?pageno="+pageno,true);

    request.onreadystatechange=function()
    {
        if(request.readyState==4 && request.status==200)
        {
            var json_chapter = JSON.parse(request.responseText);

            jnodes.push(json_chapter);


        }
    }
    request.send()
    add_nodes(jnodes);
}

function add_nodes(nodesj)
{
    var i
    for(i=0;i<nodesj.length;i++) //  <---- trouble spot I think
    {
        add_node(nodesj[i]);
    }
}

function add_node(nodej)
{
    alert(' add node '+nodej.title); // Similar problem with this alert, without it the code works wrong and dont know a way to replace it

    var sec=document.createElement("section");
    var par=document.createElement("p");
    sec.appendChild(par);
    par.appendChild(document.createTextNode(nodej.title));

    document.getElementById("mydiv").appendChild(sec);
} 
</script>
<body>


    <header>

    <nav><ul>
    <li> <input id="nextline" type="button" value="Next Line" /></li>
    <li> <input id="prevline" type="button" value="Prev Line" /></li>

    </nav></ul>
    </header>

    <h2> JSON </h2>
    <div id="mydiv"> 


</div> 
    <input id="button" type="button" value="click" onclick="getsets(currentSet,endSet);" />



    </body>
    <script>


        </script>
</html>

Another problem I'm having as I've pointed out in the code is that I have two alerts as part of my code and I can't figure out how to replace them. Without them my code goes wrong and I get the wrong output like Book1 Book1 Book1 Book3 Book5 but with them the alerts quickly become very tedious.

Any help or suggestions would be very welcome!

Replace the alert calls with what, and why? If you just want debug output, either (a) use the debugger, or (b) use console.log — Dave Newton
– Dave Newton, Commented May 27, 2014 at 15:40
I'm guessing you are fairly new to web development, so here is a tip: Press F12 in Chrome to see the web console. You can see text from console.log statements as well as enter javascript code and execute it directly to test things out. You can edit functions in the console and run them until you get the output you want, rather than reloading the page constantly. — Chill
– Chill, Commented May 27, 2014 at 15:44
See this question for why your loop doesn't work without alert: stackoverflow.com/questions/1451009/… — Barmar
– Barmar, Commented May 27, 2014 at 15:55

Pazza22 · Accepted Answer · 2014-05-27 15:58:57Z

1

Your jnodes is global. So each time you are adding a node, you are printing the entire array. Use an counter to keep track of the nodes alerted, and only print the last node each time instead of the entire array. I hope you can take it from here.

answered May 27, 2014 at 15:58

Pazza22

5643 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

JSON data display problems

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related