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, May 27 '14 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, May 27 '14 at 15:44
Using the alert calls as I go was how I was shown to do this, but in this case if I take those two alerts out, my code outputs the entirely wrong data and I honestly don't know why. — Deoff, May 27 '14 at 15:50
Using Chrome Console: [Chrome Console](https://developer.chrome.com/devtools/docs/console) — Pazza22, May 27 '14 at 15:51
See this question for why your loop doesn't work without `alert`: http://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue — Barmar, May 27 '14 at 15:55
You're getting duplicates because after each AJAX call, you add the current element to `nodes`, then you append all the nodes to the DOM. So each AJAX call displays all the previous nodes and the newest node. Have your callback function just display the new node instead of looping over the array. — Barmar, May 27 '14 at 15:58

score 1 · Answer 1 · answered May 27 '14 at 15:58

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 '14 at 15:58

Pazza22

554
3
18

JSON data display problems

1 Answers1