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

时间:2015-09-23 11:07:38

标签: javascript jquery html json html5

在开始之前,我是初学者,我希望在提出问题时我不会滥用条款。

我开始编写使用英特尔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提供商,所以它位于远程网址上,例如我们会调用该网址:http://JsonIs.here

我希望能够查询JSON URL并返回" The Elder Scrolls V:Skyrim"作为一个字符串,我可以继续在应用程序的其他地方使用。

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

5 个答案:

答案 0 :(得分:4)

你可以使用jQuery的$.getJSON。该方法返回一个具有易于理解的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

您可能会发现this article非常有用,因为它涵盖了如何深入从异步流程返回值。

2)getJSON自动解析JSON,因此你不必为什么,在这个例子中,我调用了参数data而不是json来节省混淆

答案 1 :(得分:0)

模拟你获得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);

};

对我有用;)

答案 2 :(得分:-1)

尝试使用ajax

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

    }


});

使用ajax,您可以尝试从网址获取数据,并且可以在请求成功时获取数据

答案 3 :(得分:-1)

Json带有一个键值对,索引从0开始。因此json [0]表示第一个索引中的json。 json[0].productname此处productnamekey,它将返回值

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);

答案 4 :(得分:-2)

你走了。但是,我发现"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;