JSON数据显示问题
JSON data display problems
目前我正试图得到一个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是全局的。所以每次你添加一个节点,你都在打印整个数组。使用计数器跟踪被警报的节点,并且每次只打印最后一个节点,而不是整个数组。我希望你能接手。
相关文章:
- angular js密码强度显示问题
- JQuery上下文菜单显示/隐藏问题
- AngularJs基于角色的菜单显示安全问题
- ajax显示隐藏滚动到最重要的问题
- 如何解决youtube播放器没有显示全宽的问题&身高
- 在 AngularJS 中显示信息的标记存在问题
- 有问题的突出显示(悬停)一个系列,突出显示图表
- 挖空和显示模块模式的数据绑定问题
- 使用 jQuery UI 折叠面板显示 couchDB 数据库搜索结果时出现问题
- 问题 - 在查询加载器 2 加载页面之前显示 1 秒的页面
- 显示脸书好友个人资料图片时出现问题
- 搜索输入问题显示滚动
- HTML:密码字段中的HTML5占位符属性问题 - 显示正常文本
- AngularJS+simpleCart问题显示购物车内容,直到添加项目
- 问题显示twitter状态/user_timeline MVC3.Net
- 通过jQuery将某些问题显示在html表单上
- 有问题显示数据到html表使用ajax和php
- 随机问题显示下载链接
- Chrome和谷歌网页字体的问题.显示来自Firefox的不同输出
- Ext js网格问题显示日期在safari