JSON数据显示问题

JSON data display problems

本文关键字：问题 显示 数据 JSON      更新时间：2023-09-26

目前我正试图得到一个html页面与javascript在它检索和显示JSON从一个网站，但我遇到了几个问题。

用户单击一个按钮，网站从5个链接中检索数据，并显示JSON中包含的数据。所述数据如下所示:

LINK 0    
    { "Genre": "Fantasy", "Title": "Book1" }
LINK 1
    { "Genre": "sciFi", "Title": "Book2"}

首先，我可以检索和显示数据，但是我想要这样做的方式是数据不会被显示两次。目前我的代码重复了5次，遍历链接，但也显示了所有以前的链接，所以我得到了这个:

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

当我只想:

Book1 Book2 Book3 Book4 Book5

按钮被点击后，如果它再次被点击，它应该显示来自接下来的5个链接的数据的5个部分。所以输出应该是:Book6 Book7 Book8 Book9 Book10。

我已经尝试了许多不同的变化我的代码来解决这个问题，但没有工作，我试图修复它的时间越长，我最终变得越困惑。这是我的代码的当前状态:

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

我在代码中指出的另一个问题是，我有两个警报作为我代码的一部分，我不知道如何替换它们。如果没有它们，我的代码就会出错，我会得到错误的输出，比如Book1 Book1 Book1 Book3 Book5，但是有了它们，警报很快就会变得非常繁琐。

任何帮助或建议将非常欢迎!

您的jnodes是全局的。所以每次你添加一个节点，你都在打印整个数组。使用计数器跟踪被警报的节点，并且每次只打印最后一个节点，而不是整个数组。我希望你能接手。

相关文章：