如何使用 qtip 循环json数据并显示?
elements: {
"nodes": [
{
"data": {
"id": "a2345",
"name" : "b1234"
"type": "test",
}
},
{
"data": {
"id": "a212",
"name" : "c34"
"description": "hellooo",
}
},
],
},
});
cy.nodes().qtip({
content:function(){
return ' id: '+ this.data('id')
+' name: '+ this.data('name')
+ ' type: '+ this.data('type')
+ ' description: '+ this.data('description')
},
});
当前输出:
node1 - id:a2345,name:b1234,type:test,description:undefined
node2-id:a212,name:c34,type:undefined,description:hellooo
预期产出:
node1 - id:a2345,name:b1234,type:test
node2 - id:a212,name:c34,description:hellooo
感谢任何帮助。谢谢!
答案 0 :(得分:0)
@Averill ,让我从一个简单的基于纯JavaScript的代码示例开始,它将打印您期望的字符串。
这里我展示了如何构造要返回的字符串。最后,我更新了您的代码部分。
var arr = [
{
"data": {
"id": "a2345",
"name" : "b1234",
"type": "test",
}
},
{
"data": {
"id": "a212",
"name" : "c34",
"description": "hellooo",
}
},
]
var i = 1;
for(var obj of arr) { // iterating over arr
var data = obj["data"]; // data object
var string = "node" + i + " - id: " + data["id"]+ ", name: " + data["name"]
// Deleting values with fixed keys
delete data["id"]
delete data["name"]
for(var key in data) { // iterating over remaining eys
string += ", " + key + ": " + data[key];
}
console.log(string);
i += 1;
}
node1 - id: a2345, name: b1234, type: test
node2 - id: a212, name: c34, description: hellooo
现在,根据上面的代码示例查看下面的代码。
如果以下代码示例不能满足您的问题,请发表评论。我会检查并更新它。
// You have edited your code from this point
var i = 1;
cy.nodes().qtip({
content:function(){
var string;
if(this._private["index"] == undefined){
this._private["index"] = i;
string = "Node" + i + " - " + "id: "+ this.data("id")+ ", name: " + this.data("name")
i += 1
} else {
string = "Node" + this._private["index"] + " - " + "id: "+ this.data("id")+ ", name: " + this.data("name")
}
// Deleting values with fixed keys
delete this.data("id")
delete this.data("name")
console.log(this.data)
console.log(this._private.data)
console.log(this)
for(var key in this._private.data) { // iterating over remaining keys
string += ", " + key + ": " + this.data(key)
}
return string
},
style: {
classes: 'qtip-bootstrap',
},
});
检查下面的screeshots。