CODEWITHSUNDEEP
javascriptjqueryjsonweb-services
Tastybrownies
Tastybrownies

Reputation: 937

Parsing JSON data from a Website

I have quite a few questions since I'm relatively new at javascript. I started writing this application that lets the user get stock information from the yahoo finance web service and display it on the website. Sounds easy right? I thought so too but I'm having a hard time manipulating the data I'm getting back. Maybe someone can help me get this working. I feel like I'm really close at this point.

The user enters their stock of choice in the stockTextBox such as AAPL or GOOG. Then I set a script attribute with concatenation. Now the confirm() line is VERY odd. If I don't have that confirm in there the alert in the function myCallBack doesn't seem to execute. I can't explain this at all. Maybe I don't now something I should.

Now if I debug I can tell for a back that stock information is coming back from the website. First here is the code and then the JSON data. I would sincerely appreciate it if anyone could help me get this thing to work. I've been fiddling with it for a couple of hours now. THANK YOU! In other words, my question is how do I go about display data that I got from a web service onto my web page?

<form id="stockInput">
Stock Name: <input type="text" id="stockTextBox">
<input type="submit" id="submitButton" value="Submit">
</form>
</b>
<label id="stockLabel"></label>
<script>

var submitButton = document.getElementById("submitButton");
submitButton.addEventListener('click', actionPerformed, false);

function actionPerformed(e)
{

        var textValue = document.getElementById("stockTextBox").value;

        //tried to put to an element and then read the element value down below through concatenation in the src...
    //document.getElementById("stockLabel").innerHTML = textValue;

    var script = document.createElement('script');
    script.setAttribute('src',"http://finance.yahoo.com/webservice/v1/symbols/"+textValue+"/quote?format=json&callback=myCallBack");
    document.body.appendChild(script);
    confirm(); //ODD POINT...


 }
 function myCallBack(data)
 {
   alert("HEY" + data);

   //What I thought I would do. This doesn't output the right info.
   //for(key in data)
   //{

    //alert(data[key]);
   //}



 }

</script>
</body>
</html>

Now here is the JSON that I can see in the debugger via Firefox:

myCallBack({
    "list": {
        "meta": {
            "type": "resource-list",
                "start": 0,
                "count": 1
        },
            "resources": [{
            "resource": {
                "classname": "Quote",
                    "fields": {
                    "name": "Google Inc.",
                        "price": "1030.579956",
                        "symbol": "GOOG",
                        "ts": "1383249600",
                        "type": "equity",
                        "utctime": "2013-10-31T20:00:00+0000",
                        "volume": "1640035"
                }
            }
        }

        ]
    }
});

Upvotes: 0

Views: 320

Answers (2)

Chris Trudeau
Chris Trudeau

Reputation: 1437

You are only seeing [object] because it's displaying the data type. You need to get object attributes to obtain the data. The JSON data is very accessible from javascript seeing as how JSON stands for JavaScript Object Notation.

It's very simple once you get started, as the data is basically comprised of objects with attributes and lists of objects. the variable data is your root object, and you can access everything below it easily.

I'll provide a few examples of how you would access certain things in the data:

the attribute "name":

alert(data.list.resources[0].resource.fields.name);

the attribute "classname":

alert(data.list.resources[0].resource.classname);

It's just a text representation of Javascript objects. "resources" is a list of objects, "list" is an object, "fields" is an object, and "price" is a key/value pair to store data.

Read more here: http://www.json.org/ http://www.w3schools.com/json/

If I misunderstood the question let me know, I took a shot at what I thought you meant.

Upvotes: 2

Flight Odyssey
Flight Odyssey

Reputation: 2287

Treat the JSON object like a regular Javascript object. For instance, if you wanted to display the company name and price:

 function myCallBack(data)
 {
    alert("Name: " + data.list.resources[0].resource.fields.name);
    alert("Price: " + data.list.resources[0].resource.fields.price);
 }

To display the whole thing in raw form for debugging purposes, you can convert it back into a JSON-serialized string:

 function myCallBack(data)
 {
    alert(JSON.stringify(data));
 }

More about JSON: https://developer.mozilla.org/en-US/docs/JSON

Upvotes: 1

Related Questions