Using javascript/html to grab one piece of data from JSON result

Question

Before I start, I'm complete beginner and I hope I'm not misusing terms when I ask my question.

I'm starting off writing an HTML5/Javascript application using Intel XDK to query barcodes of videos games from an online api, and I only need one piece of the JSON result (the title of the game) to then go on and use within my app.

The JSON result looks like this:

{"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"}}

All I want to use in my app is that very first 'productname' entry.

The JSON is from an api provider I have an account with so it's on a remote URL for examples sake we'll call the URL: http://JsonIs.here

I want to be able to query the JSON URL and return "The Elder Scrolls V: Skyrim" as a string which I can then go on to use elsewhere in the application.

I've got my barcode scanning working, I can create the GET request URL already, I just don't know where to start calling that URL and then returning the small piece of information I need.

Pretty impressive question for a first question (beats most, in fact). Next time however, please also add what you have already tried doing to get the data. Even if it doesn't work at all (which is essentially why you're here), it shows that you've tried something and sometimes it can also spark others to create new ideas :-) — Stephan Bijzitter, Sep 23 '15 at 11:11
Everyone answering should **re-read** the question again, particularly that last paragragh. — Andy, Sep 23 '15 at 11:16
Thanks Andy - that's my actual key problem! I'm sure I can figure out how to work with the data once I have it in my app, I just don't know how to query it properly and turn it unto useable data? I guess I need to create an array from the remote URL? I've no idea honestly. — CraigE, Sep 23 '15 at 11:20
Stephen: Thanks, I should have said that I haven't really *tried* anything. I'm about 2 hours into googling it, and I keep finding example of how to query JSON data that's already within the code, but I can't seem to find how I take a remote URL, and put that into a useable format of some kind. — CraigE, Sep 23 '15 at 11:21

score 4 · Accepted Answer · edited May 23 '17 at 12:22

4

You can use jQuery's $.getJSON for this. The method returns a promise which has a nice easy-to-understand API.

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

A couple of things to note here. 1) getJSON is an asynchronous process, so productName won't be immediately available, so you might have to restructure your code a little to account for this. You can't, for example do this:

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

You may find this article useful as it covers how to return a value from an async process in depth.

2) getJSON automatically parses the JSON so you don't have to which is why, in the example, I've called the argument data and not json to save confusion.

edited May 23 '17 at 12:22

Community

1
1

answered Sep 23 '15 at 11:26

Andy

61,948
13
68
95

Ah ha ! This looks like it ! So literally getJSON pulls it, and then I can query it straight away without putting it into any form of array? And then I have the productName variable that I can go on to use!! Thanks so much, I'll go back and have a play and come back with happy results hopefully. – CraigE Sep 23 '15 at 11:30
1

Yes.`data` is an object with one key `0` which is also an object. – Andy Sep 23 '15 at 11:31
I guess I could also call data[3].productname to get the one further along the JSON result? Just to make sure I'm following how it works - not that I actually need to. – CraigE Sep 23 '15 at 11:32
1

@Andy can you check my updated answer if its possible to get the value of product name i just to now for myself if i did solve this one – guradio Sep 23 '15 at 11:33
@Andy - your code was perfect. I now have a button I click which launches the barcode scanner, returns the barcode number on the page and returns the name of the Game on the page! – CraigE Sep 23 '15 at 12:05

score 0 · Answer 2 · answered Sep 23 '15 at 12:06

To simulate you getting your 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"}}';

};

a function that gets the JSON and creates an array that holds all your productnames

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

};

It works for me ;)

guradio · Answer 3 · 2015-09-23T11:37:26.157

-1

Try using ajax

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

    }


});

Using ajax you can try to get the data from the url and you can get the data in the success of the request

edited Sep 23 '15 at 11:37

answered Sep 23 '15 at 11:10

guradio

15,524
4
36
57

Downvoted because you provided no explanation whatsoever. Pasting a piece of code is not exactly a good answer, even if technically correct. – Stephan Bijzitter Sep 23 '15 at 11:13
@StephanBijzitter i assumed no need because i provided a fiddle but i did put the explaination now – guradio Sep 23 '15 at 11:15
And you haven''t answered the question. – Andy Sep 23 '15 at 11:16
@Andy thanks for checking and suggestion i appreciate the comment :) happy coding – guradio Sep 23 '15 at 11:37

Furquan Khan · Answer 4 · 2015-09-23T11:18:04.217

Json comes with a key value pair and the indexing starts with 0. Hence json[0] that means json in first index. json[0].productname here productname is the key which will give the value in return

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

Hi thanks for having a look. but how do I query the JSON result in the first place. I have a URL which takes me to a remote JSON result, and I don't know how to pull that information into my code to then query it... if you follow? — CraigE, Sep 23 '15 at 11:18

Akki619 · Answer 5 · 2015-09-23T11:25:50.653

-2

Here you go. However I find "0" as key in your JSON response somewhat not seen till today. It is better practice to start of with a character.

Your JSON response have one object. You can access the element in the object by index. Here on 0th index you have your data. The reason we are accessing it as a[0].key where key represent name of key you want to access from the object.

This is how you can get the data from JSON and use it in your application to achieve rest of your functionality as per your question.

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;

edited Sep 23 '15 at 11:25

answered Sep 23 '15 at 11:09

Akki619

2,386
6
26
56

Downvoted because you provided no explanation whatsoever. Pasting a piece of code is not exactly a good answer, even if technically correct. – Stephan Bijzitter Sep 23 '15 at 11:13
Because you haven't answered the question. – Andy Sep 23 '15 at 11:15
Provided it is within the time limit that locks my vote, sure :-) – Stephan Bijzitter Sep 23 '15 at 11:15
@Andy Would you let me know how I did not answer the question. – Akki619 Sep 23 '15 at 11:20
the last paragraph. to be honest i didnt recognize it at first as well `I've got my barcode scanning working, I can create the GET request URL already, I just don't know where to start calling that URL and then returning the small piece of information I need.` – guradio Sep 23 '15 at 11:24
@Akki619 I did same mistake mate :) – guradio Sep 23 '15 at 11:28

Using javascript/html to grab one piece of data from JSON result

5 Answers5