使用 javascript/html 从 JSON 结果中获取一条数据

Question

在开始之前，我完全是初学者，希望我在提问时没有误用术语。

我开始使用英特尔 XDK 编写一个 HTML5/Javascript 应用程序来从在线 api 查询视频游戏的条形码，我只需要一个 JSON 结果（游戏的标题）然后继续在我的应用中使用。

JSON 结果如下所示：

{"0":{"productname":"The Elder Scrolls V: Skyrim","imageurl":"http://ecx.images-amazon.com/images/I/413Gdr3FzqL._SL160_.jpg","producturl":"","price":"14.00","currency":"USD","saleprice":"","storename":"N/A"},"1":{"productname":"Skyrim X360","imageurl":"http://ecx.images-amazon.com/images/I/41QbF1Vg5KL._SL160_.jpg","producturl":"","price":"18.00","currency":"USD","saleprice":"","storename":"N/A"},"2":{"productname":"Bethesda Softworks Skyrim X360","imageurl":"http://ecx.images-amazon.com/images/I/41X97hqaJwL._SL160_.jpg","producturl":"","price":"23.95","currency":"USD","saleprice":"","storename":"N/A"},"3":{"productname":"BETHESDA SOFTWORKS 11763 / Skyrim X360","imageurl":"http://ecx.images-amazon.com/images/I/41IaEzP-6pL._SL160_.jpg","producturl":"","price":"34.00","currency":"USD","saleprice":"","storename":"N/A"}}

我只想在我的应用中使用第一个“产品名称”条目。

JSON 来自我有帐户的 api 提供程序，因此它位于远程 URL 上，例如，我们将调用 URL：http://JsonIs.here

我希望能够查询 JSON URL 并将“The Elder Scrolls V: Skyrim”作为字符串返回，然后我可以继续在应用程序的其他地方使用它。

我的条形码扫描工作正常，我已经可以创建 GET 请求 URL，我只是不知道从哪里开始调用该 URL，然后返回我需要的一小部分信息。

Answer 1

您可以为此使用 jQuery 的 $.getJSON。该方法返回一个带有易于理解的 API 的 Promise。

var productName;
$.getJSON('http://JsonIs.here').then(function (data) {
    productName = data[0].productname;
});

这里有几点需要注意。 1) getJSON 是一个异步进程，因此 productName 不会立即可用，因此您可能需要稍微重构代码以解决此问题。例如，您不能这样做：

var productName;
$.getJSON('http://JsonIs.here').then(function (data) {
    productName = data[0].productname;
});
console.log(productName); // undefined

您可能会发现this article 很有用，因为它深入介绍了如何从异步进程返回值。

2) getJSON 会自动解析 JSON，因此您不必这样做，这就是为什么在示例中，我将参数称为 data 而不是 json 以避免混淆。

Answer 2

模拟您获取 JSON

var getJSON = function(){
     return '{"0":{"productname":"The Elder Scrolls V: Skyrim","imageurl":"http://ecx.images-amazon.com/images/I/413Gdr3FzqL._SL160_.jpg","producturl":"","price":"14.00","currency":"USD","saleprice":"","storename":"N/A"},"1":{"productname":"Skyrim X360","imageurl":"http://ecx.images-amazon.com/images/I/41QbF1Vg5KL._SL160_.jpg","producturl":"","price":"18.00","currency":"USD","saleprice":"","storename":"N/A"},"2":{"productname":"Bethesda Softworks Skyrim X360","imageurl":"http://ecx.images-amazon.com/images/I/41X97hqaJwL._SL160_.jpg","producturl":"","price":"23.95","currency":"USD","saleprice":"","storename":"N/A"},"3":{"productname":"BETHESDA SOFTWORKS 11763 / Skyrim X360","imageurl":"http://ecx.images-amazon.com/images/I/41IaEzP-6pL._SL160_.jpg","producturl":"","price":"34.00","currency":"USD","saleprice":"","storename":"N/A"}}';

};

获取 JSON 并创建包含所有产品名称的数组的函数

var getProductName = function(){
    // get the JSON_string ;)
    var JSON_string = getJSON();

    // convert it to an obj.
    var JSON_obj = JSON.parse(JSON_string);

    //create something to store your data in, you don't need to do this ofcourse
    var r_productNames = [];

    for(var key in JSON_obj){
        if(JSON_obj.hasOwnProperty(key)){
            r_productNames.push(JSON_obj[key].productname);
       }
    }

    // et voila, you have an array of all the productnames, returned by your request.
   console.log(r_productNames);

};

它对我有用；）

Answer 3

Json 带有一个键值对，索引从 0 开始。因此 json[0] 表示第一个索引中的 json。 json[0].productname 这里的productname 是key，它会返回值

var json = {"0":{"productname":"The Elder Scrolls V: Skyrim","imageurl":"http://ecx.images-amazon.com/images/I/413Gdr3FzqL._SL160_.jpg","producturl":"","price":"14.00","currency":"USD","saleprice":"","storename":"N/A"},"1":{"productname":"Skyrim X360","imageurl":"http://ecx.images-amazon.com/images/I/41QbF1Vg5KL._SL160_.jpg","producturl":"","price":"18.00","currency":"USD","saleprice":"","storename":"N/A"},"2":{"productname":"Bethesda Softworks Skyrim X360","imageurl":"http://ecx.images-amazon.com/images/I/41X97hqaJwL._SL160_.jpg","producturl":"","price":"23.95","currency":"USD","saleprice":"","storename":"N/A"},"3":{"productname":"BETHESDA SOFTWORKS 11763 / Skyrim X360","imageurl":"http://ecx.images-amazon.com/images/I/41IaEzP-6pL._SL160_.jpg","producturl":"","price":"34.00","currency":"USD","saleprice":"","storename":"N/A"}}
alert(json[0].productname);

Answer 4

尝试使用 ajax

$.ajax({
    type: 'GET',
    url: 'http://JsonIs.here',
    dataType: "json",
    success: function(data) {
        console.log(data[0].productname)
    },
    error: function(data) {

    }


});

使用ajax可以尝试从url获取数据，可以在请求成功时获取数据

Answer 5

给你。但是，我发现 "0" 是您的 JSON 回复中的关键，直到今天才出现。最好从一个字符开始。

您的JSON 响应只有一个对象。您可以通过索引访问对象中的元素。在0th 索引上，您有您的数据。我们以 a[0].key 访问它的原因，其中 key 表示您要从对象访问的键的名称。

这是您从JSON 获取数据并在您的应用程序中使用它以根据您的问题实现其余功能的方式。

var a = {"0":{"productname":"The Elder Scrolls V: Skyrim","imageurl":"http://ecx.images-amazon.com/images/I/413Gdr3FzqL._SL160_.jpg","producturl":"","price":"14.00","currency":"USD","saleprice":"","storename":"N/A"},"1":{"productname":"Skyrim X360","imageurl":"http://ecx.images-amazon.com/images/I/41QbF1Vg5KL._SL160_.jpg","producturl":"","price":"18.00","currency":"USD","saleprice":"","storename":"N/A"},"2":{"productname":"Bethesda Softworks Skyrim X360","imageurl":"http://ecx.images-amazon.com/images/I/41X97hqaJwL._SL160_.jpg","producturl":"","price":"23.95","currency":"USD","saleprice":"","storename":"N/A"},"3":{"productname":"BETHESDA SOFTWORKS 11763 / Skyrim X360","imageurl":"http://ecx.images-amazon.com/images/I/41IaEzP-6pL._SL160_.jpg","producturl":"","price":"34.00","currency":"USD","saleprice":"","storename":"N/A"}}

a[0].productname;