JSON文件只显示最后一个条目,尽管id不同
JSON file showing only last entry though ids are different
我的json文件如下:
var obj = {
Dilse : {"name":"Dil Se Re","length":"5:40","songType":"Romantic"},
Dilse : {"name":"Jiya Jale","length":"3:50","songType":"Self Description"},
Dilse : {"name":"Chaiyya Chaiyya","length":"4:30","songType":"Masti"},
Rockstar : {"name":"Sadda haq","length":"5:40","songType":"Romantic"},
Rockstar : {"name":"Tum ho Pas Mere","length":"3:50","songType":"Self Description"},
Rockstar : {"name":"Sheher me","length":"4:30","songType":"Masti"},
}
我想在点击Dilse时检索Dilse条目,在点击Rockstar时检索Rockstar条目。我已经在我的页面上有Dilse和Rockstar条目。
JS函数如下:
function dilSe(){
document.getElementById("div0").innerHTML = ""; var k =0;
if(xhr.readyState==4){
if(xhr.status==200){
var data=xhr.responseText;
var arr=eval(data);
for(var i=0;i<3;i++){ //I dont know if I should itearte like this !?
var link=document.createElement('a');
link.id='name1'+k++;
link.innerHTML="Song Name: " +obj.Dilse.name+"<br/>"+"Song Length: "+obj.Dilse.length+"<br/>"+"Song Type: "+obj.Dilse.songType+"<br/><br/>";
console.log("link.id is "+link.id);
link.setAttribute('href','#');
link.addEventListener('click',albums[link.id]);
div0.appendChild(link);
}
}else{
div0.innerHTML="Oops, error in communication!";
div0.style.color="red";
}
}
}
function rockStar(){
document.getElementById("div0").innerHTML = ""; var k =0; var r=3;
if(xhr.readyState==4){
if(xhr.status==200){
var data=xhr.responseText;
var arr=eval(data);
for(var i=0;i<3;i++){ //I dont know if I should itearte like this !?
var link=document.createElement('a');
link.id='name2'+k++;
link.innerHTML="Song Name: " +obj.Rockstar.name+"<br/>"+"Song Length: "+obj.Rockstar.length+"<br/>"+"Song Type: "+obj.Rockstar.songType+"<br/><br/>";
console.log("link.id is "+link.id);
link.setAttribute('href','#');
console.log("obj.rockstar.name is "+obj.Rockstar.name);
link.addEventListener('click',albums[link.id]);
div0.appendChild(link);
}
}else{
div0.innerHTML="Oops, error in communication!";
div0.style.color="red";
}
}
}
但最后我得到的是Dilse的最后一个条目(即Chaiyya Chaiyya)和Rockstar的最后一个条目(即Sheher me)。我希望所有三个条目应该显示。
您的JSON对象不正确。显然,你不能有多个条目具有相同的键(你正在做的是告诉JS:"James是这个家伙。不,詹姆斯是另一个人。啊,不,詹姆斯是第三个人。"当然,他只记得最后一个。
你需要使用数组。最简单的解决方案是修改JSON,如下所示:
var obj = {
Dilse :
[
{"name":"Dil Se Re","length":"5:40","songType":"Romantic"},
{"name":"Jiya Jale","length":"3:50","songType":"Self Description"},
{"name":"Chaiyya Chaiyya","length":"4:30","songType":"Masti"},
],
Rockstar :
[
{"name":"Sadda haq","length":"5:40","songType":"Romantic"},
{"name":"Tum ho Pas Mere","length":"3:50","songType":"Self Description"},
{"name":"Sheher me","length":"4:30","songType":"Masti"},
],
}
还有其他可能的选择,例如单个数组(非关联),将过去的键作为每个对象中的一个值,但这需要您遍历整个数组以找到您想要的内容。
相关文章:
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- difference between '$(<%= DDL.ID %>) & $('
- 使用Javascript获取所选选项ID
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- 根据id将json数组组合为一个json数组
- 尽管链接成功并已成功下载,但未找到NPM模块
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 对id以某个字符串开头的元素进行计数
- 如果元素's的ID以数字开头
- 通过id和class属性获取元素
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- 传递来自<输入类型=“;文件“;id=“;文件“/>尽管还有一个按钮点击
- Javascript尽管ID不同,但只有第一个按钮提交给Ajax表单
- Facebook订阅源对话框:帖子没有出现在朋友'尽管我得到了回复id
- layer.find获胜't通过id返回kinetijs对象,尽管它存在
- 尽管通过id进行了调用,但Javascript无法访问jsf outputText(label)元素
- 无法设置null错误的innerHTML.尽管存在html ID
- $(this).attr('id')返回未定义,尽管id已定义
- JSON文件只显示最后一个条目,尽管id不同
- 尽管页面上存在给定id的元素,getElementById仍返回null