Question

我有一个关于JSONP api与URL http://jsonplaceholder.typicode.com/users上可用虚拟数据相关的问题。基本上我希望在html文档中使用javascript获取数据，并将结果显示在无序列表标记中。

我有这个设置：

<

!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html data-ng-app="">
    <head>
        <title>Using AngularJS Directives and Data Binding</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script language="JavaScript" type="text/javascript" src="jquery-1.11.2.js"></script>
    </head>
    <body>
        <script src="angular.min.js"></script>

        <script>
            $.ajax('http://jsonplaceholder.typicode.com/users', {
                method: 'GET'
            }).then(function(data) {
                console.log(data);
                document.getElementById('container').innerHTML += "<ul><li>" + data + "</li></ul>";
            });
        </script>

        <div id="container"></div>
        <!--
        <div class="container">
            Name: <input type="text" data-ng-model="name" /> {{ name }}
        </div> -->

    </body>
</html>

通过在本地检查我的网站，我们得到以下结果：

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

在一个公告点。

我正在使用jQuery和angularJS。我可以告诉我提取一些数据，但我无法弄清楚如何将数据操作到它的子部分，如url：http://jsonplaceholder.typicode.com/users/所示。

有人可以对我在这里失踪的东西有所了解吗？尝试data.id或data.name等将返回undefined。

请记住，我是初学者，刚刚开始使用API和JSONP。我确定答案相对简单，但请直接和教学地给我。

谢谢。

Answer 1

你说你正在使用AngularJS，但在你的代码片段中没有对angularJS做任何事情。以下是用于访问[Json.NET用户数据的AngularJS实现。

仔细查看街道，套房和城市的访问方式。

public ActionResult GetData()
{
    var info = new ComplexA
    {
        A = "test",
        B = "BB",
        Complex1 = new Foo {Name = "Ss", Prop1 = new Bar {A = "Name", B = false}}
    };
    return JsonResponse(info);
}

Answer 2

var len = data.length;
for (var i = 0; i < len; i++) { 
    console.log(data[i].id);
}

Answer 3

我对您的HTML进行了一些更改。 for循环将为每个用户填充数据的无序列表。

setText('')

今天，您无需使用jQuery即可使用GET方法获取数据。只需使用Fetch API。以下是如何使用浏览器的本机功能获取数据的示例。

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html data-ng-app="">
    <head>
        <title>Using AngularJS Directives and Data Binding</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script language="JavaScript" type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    </head>
    <body>
        <script src="angular.min.js"></script>

        <script>
            $.ajax('http://jsonplaceholder.typicode.com/users', {
                method: 'GET'
            }).then(function(data) {
                console.log(data);

                let response = '';
                for (let i = 0; i < data.length; i++) {
                    response +=
                    `<ul>
                        <li>${data[i].name}</li>
                        <li>${data[i].email}</li>
                        <li>${data[i].address.city}</li>
                        <li>${data[i].address.street}</li>
                        <li>${data[i].address.suite}</li>
                        <li>${data[i].address.zipcode}</li>
                        <li>${data[i].address.geo.lat}</li>
                        <li>${data[i].address.geo.lng}</li>
                        <li>${data[i].phone}</li>
                        <li>${data[i].website}</li>
                        <li>${data[i].company.name}</li>
                        <li>${data[i].company.catchPhrase}</li>
                        <li>${data[i].company.bs}</li>
                    </ul>`
                }
                document.getElementById('container').innerHTML = response;
            });
        </script>

        <div id="container"></div>
        <!--
        <div class="container">
            Name: <input type="text" data-ng-model="name" /> {{ name }}
        </div> -->

    </body>
</html>

功能示例：https://codepen.io/th91vi/pen/KKVwZwm

您可能需要阅读一些有关Fetch API的文档：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Answer 4

使用JSON.stringify(data)它会将Javascript对象转换为JSON字符串

JSONP使用html文档中的javascript从http://jsonplaceholder.typicode.com/users获取用户数据

4 个答案: