使用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"}}

我想在我的应用程序中使用的是第一个'productname'条目。

JSON来自我有帐户的api提供商因此它在远程URL上例如，我们将URL命名为http://JsonIs.here

我希望能够查询JSON URL并返回"上古卷轴V:天际"作为一个字符串，然后我可以继续在应用程序的其他地方使用。

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

Answer 1

您可以使用jQuery的$.getJSON。这个方法返回一个promise，它有一个很好理解的API。

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

您可能会发现本文很有用，因为它深入讨论了如何从异步进程返回值。

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;