循环并显示json数据

时间:2018-05-26 04:46:25

标签: javascript json

如何使用 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

感谢任何帮助。谢谢!

1 个答案:

答案 0 :(得分:0)

@Averill ,让我从一个简单的基于纯JavaScript的代码示例开始,它将打印您期望的字符串。

这里我展示了如何构造要返回的字符串。最后,我更新了您的代码部分。

示例代码示例(JS):

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。

enter image description here

enter image description here

enter image description here