Question

我有以下名为levels.json的JSON文件。它存储在服务器上。

{
    "level1":
    [{
        "shape1":
        {
            "width":50,
            "height":50,
            "positionx":25,
            "positiony":25,
            "color":"rgba(255,0,0,1)",
            "number":"3"
        },
        "shape2":
        {
            "width":50,
            "height":50,
            "positionx":100,
            "positiony":25,
            "color":"rgba(0,255,0,1)",
            "number":"3"
        },
        "shape3":
        {
            "width":50,
            "height":50,
            "positionx":25,
            "positiony":100,
            "color":"rgba(0,0,255,1)",
            "number":"3"
        },
        "shape4":
        {
            "width":50,
            "height":50,
            "positionx":100,
            "positiony":100,
            "color":"rgba(255,255,0,1)",
            "number":"3"
        }
    }],
    "level2":
    [{
        "shape1":
        {
            "width":50,
            "height":50,
            "positionx":25,
            "positiony":25,
            "color":"rgba(255,0,0,1)",
            "number":"3"
        },
        "shape2":
        {
            "width":50,
            "height":50,
            "positionx":100,
            "positiony":25,
            "color":"rgba(0,255,0,1)",
            "number":"3"
        },
        "shape3":
        {
            "width":50,
            "height":50,
            "positionx":25,
            "positiony":100,
            "color":"rgba(0,0,255,1)",
            "number":"3"
        },
        "shape4":
        {
            "width":50,
            "height":50,
            "positionx":100,
            "positiony":100,
            "color":"rgba(255,255,0,1)",
            "number":"3"
        }
    }]
}

下面的HTML文件（shapefromjson.html）也存储在服务器上与上面的JSON文件相同的目录中。

<!DOCTYPE html>
<html>
<head>
<title>Shape From JSON</title>
<meta name="robots" content="noindex,follow">
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> -->
<script language="JavaScript" type="text/javascript">
function ajax_get_json()
{
    var hr = new XMLHttpRequest();
    hr.open("GET", "levels.json", true);
    hr.setRequestHeader("Content-type", "application/json", true);
    hr.onreadystatechange = function()
    {
        if(hr.readyState == 4 && hr.status == 200)
        {
            var data = JSON.parse(hr.responseText);
            var results = document.getElementById("results");
            results.innerHTML = "";
            //var i = 1;
            for(var level in data)
            {
                //var j = 1;
                //results.innerHTML += "Shape: "+i+"<br />";
                for(var shape in level)
                {
                    //results.innerHTML += j+"<br />";
                    results.innerHTML += "w: "+data[level][shape].width+"<br />";
                    results.innerHTML += "h: "+data[level][shape].height+"<br />";
                    results.innerHTML += "x: "+data[level][shape].positionx+"<br />";
                    results.innerHTML += "y: "+data[level][shape].positiony+"<br />";
                    results.innerHTML += "n: "+data[level][shape].number+"<br />";
                    results.innerHTML += "c: "+data[level][shape].color+"<br /><hr />";
                    //j++;
                }
                //i++;
            }
        }
    }
    hr.send(null);
    results.innerHTML = "requesting...";
}
</script>
</head>
<body>
<div id="results"></div>
<script language="JavaScript" type="text/javascript">
ajax_get_json();
</script>
</body>
</html>

我在浏览器中遇到的错误是：“[错误] TypeError：'undefined'不是对象（评估'data [level] [shape] .width'）onreadystatechange（shapefromjson.html，第31行）”< / p>

Answer 1

for(var level in data)
     {
      for(var shape in data[level]) //Problem is here
                {
   //Your code
}

但我认为你应该为你的内部使用for循环，因为这是一个数组。

for(var level in data)
    {
    for(var i=0; i< data[level].length;i++ ) //Problem is here
       {
           for (var shape in data[level][i]){
              results.innerHTML += "w: "+data[level][i][shape].width+"<br />"; //use i as index

           //Your code
        }

Answer 2

这是一个正确的代码（测试，工作，提高了可读性）：

for (var level_index in data){
    var level = data[level_index] ;
    for (var layer in level){
        var shapes = level[layer];
        for(var index in shapes){
            var shape = shapes[index];

            results.innerHTML += "w: "+= shape.width + "<br />"; //And so on.

        }
    }
}

Answer 3

请首先在您的页面中包含jQuery库，如：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

然后编写html代码并创建一个按钮并在该按钮上设置onclick，如：

<input name="" type="button" value="Submit" onclick="getJson();"/>

之后编写java脚本代码如：

var shape1Width;
var shape1Height;
var shape1Positionx;
var shape1Positiony;
var shape1Color;
var shape1Number;

function getJson() {
$.ajax({
   type: "Get",
        url: "http://www.json-generator.com/j/bORzQjYsZe?indent=4",
        async: false,
       success: function(data){
       var len1=data.level1.length;
       var len2=data.level2.length;
       for(var i=0;i<len1;i++){
          shape1Width=data.level1[i].shape1.width;
          shape1Height=data.level1[i].shape1.height;
          shape1Positionx=data.level1[i].shape1.positionx;
          shape1Positiony=data.level1[i].shape1.positiony;
          shape1Color=data.level1[i].shape1.color;
          shape1Number=data.level1[i].shape1.number;
       }
       alert("width:"+shape1Width+",height:"+shape1Height+",PositionX:"+shape1Positionx+",PositionY:"+shape1Positiony+",Color:"+shape1Color+",Number:"+shape1Number);
      },
   error: function(errorMsg){
    alert(errorMsg);
   }
});
}

如何访问此JSON中的属性：值对

3 个答案: