Question

我不熟悉使用Jquery JSON和API（这是我的第一个Stack问题，所以请耐心等待我）。因此，我试图找出一种方法，即我点击一个API，它将返回JSON中的数据（城市名称），我必须以列表形式显示在我的页面上。但是应该更新城市，页面应该动态显示城市名称。

这是小提琴链接： Fiddle File

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST2</title>
</head>
<body>
    <button>Submit</button>
    <select id="list"></select>

</body>
</html>

<script type="text/javscript" src="jquery-3.1.0.js"></script>
<script type="text/javscript">

    $.ajax({
        type: 'GET',
        url: 'API HERE',

        data: { get_param: 'value' },
        dataType: 'json',
        success: function (data) {
            $.each(data, function(index, element) {
                $('body').append($('list', {
                    text: element.detail
                }));
        });
            }
    });
</script>

JSON FILE

[
{"id":3,"detail":"Mumbai, Maharashtra, India"}, 
{"id":10,"detail":"Pune,Maharashtra, India"},
{"id":166,"detail":"Bengaluru"}
]

请求您的帮助，事先感谢那些贡献的人

Answer 1

您不需要解析。 JSON是JavaScript Object Notation。您可以将数据标记为变量并在代码中使用它，如

    success: function(result) {
       var data = result;
   data.forEach(function(data){
   $('body').append($('list', {
                    text: element.detail
      }));
    }
    console.log(data);

    //in console you can see tyour data
    Object {type: "form-focus", element: "#run"}

Answer 2

这不是一个JSON对象，它是一个数组，你确定它会像这样回来吗？尝试记录它，然后执行以下操作之一：

如果它是一个字符串写这个

 $.ajax({
    type: 'GET',
    url: 'API HERE',

    data: { get_param: 'value' },
    dataType: 'json',
    accepts: "application/json; charset=utf-8"
    /* ... */

接受告诉服务器发送回json，因此你可以把它作为json。如果它仍然是一个字符串，请写JSON.parse(data)

如果它像你编写的数组一样，那么应该没有问题，除了它的数组不是json对象。 json应该是一个不是数组的对象。

{results: [
{"id":3,"detail":"Mumbai, Maharashtra, India"}, 
{"id":10,"detail":"Pune,Maharashtra, India"},
{"id":166,"detail":"Bengaluru"}
]}

这样的东西会使它成为一个json文件。

如果是这样，那么你应该写：data.results来访问你需要的数组。

Answer 3

如果您从API接收数据，您可以按照自己的意愿行事。

    //...
    success: function (data) {
        $.each(data, function(index, element) {
            //$('body').append($('list', {//no comment
            //    text: element.detail
            //}));
            //add cities to select id="list"
            $('<option/>') //create option
                 .val(element.id) //set its value
                 .text(element.detail) //set text
                 .appendTo('#list'); //and append to the list
        });//each
    }

从API解析JSON数据

3 个答案: