Question

我试图使用JQuery解析这个外部JSON文件：

var items={ "menu" : [ 
   {"id": "TN", "value": "ar"} ,
    {"id": "FR", "value": "fr"} ,
    {"id": "GB", "value": "en"} ,
    {"id": "US", "value": "en"} 
]
}

使用这个HTML文件，如果语法错误，我会徘徊：

<!DOCTYPE html>
<html>
<head>
<title>Your New Application</title>
<style type="text/css">
    /* Prevent copy paste for all elements except text fields */
    *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
    input, textarea  { -webkit-user-select:text; }
    body { background-color:white; color:black }
</style>
<script type="text/javascript">
    /* This code is used to run as soon as Intel activates */
    var onDeviceReady=function(){
    //hide splash screen
    intel.xdk.device.hideSplashScreen();
    };
    document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script>

    //When DOM loaded we attach click event to button
    $(document).ready(function() {

        //after button is clicked we download the data
        $('.button').click(function(){

            //start ajax request
            $.ajax({
                url: "pays.json",
                //force to handle it as text
                dataType: "json",
                success: function(data) {

                    //data downloaded so we call parseJSON function 
                    //and pass downloaded data
                    var json = $.parseJSON(data);
                    //now json variable contains data in json format
                    //let's display a few items
                    $('#results').html('Country: ' + json.items.menu[0].id + '<br  />Language: ' + json.items.menu[0].value);
                }
            });
        });
        });
    });
</script>

</head>
<body>
<a href="pays.json" target="_blank">Open JSON file</a><br />
<input type="button" value="Get and parse JSON" class="button" />
<br />
<span id="results"></span>
</body>
</html>

问题是我在输出上没有得到任何东西。这是什么错误？提前谢谢！

Answer 1

如果第一部分应该是“外部JSON”文件的内容，那不是JSON。这只是在文件中声明对象的JavaScript。删除var items=部分，使其实际上是有效的JSON，然后你会这样做：

$.ajax({
    url: "pays.json",
    //force to handle it as text
    dataType: "json",
    success: function (data) {
        $('#results').html('Country: ' + data.menu[0].id + '<br  />Language: ' + data.menu[0].value);
    }
});

我已经取消了$.parseJSON()的电话，因为它不需要。如果为AJAX请求指定dataType: 'json'，则响应将自动解析为JSON，然后结果（如果解析未失败）作为第一个参数传递给success函数。这意味着该函数内部data是您的对象。

您的对象中也没有声明items属性，只有menu，所以我已将其从json.items.menu更改为data.menu。

Answer 2

更改此

   var json = $.parseJSON(data);
                    //now json variable contains data in json format
                    //let's display a few items
                    $('#results').html('Country: ' + json.items.menu[0].id + '<br  />Language: ' + json.items.menu[0].value);
                }

到

                //now json variable contains data in json format
                     var menu=data.items.menu;
                   for(var i in menu)
                      {
                         //let's display a few items
                       $('#results').html('Country: ' + menu[i].id + '<br     />Language: ' +menu[i].value);

}

解析外部JSON文件

2 个答案: