从网站解析 JSON 数据

Parsing JSON data from a Website

本文关键字：JSON 数据 网站      更新时间：2023-09-26

我有很多问题，因为我对javascript相对较新。我开始编写这个应用程序，让用户从雅虎财经网络服务获取股票信息并将其显示在网站上。听起来很容易吧？我也这么认为，但我很难操纵我得到的数据。也许有人可以帮助我解决这个问题。我觉得我现在真的很接近。

用户在stockTextBox中输入他们选择的股票，例如AAPL或GOOG。然后我设置一个带有串联的脚本属性。现在 confirm（） 行非常奇怪。如果我没有确认，则函数myCallBack中的警报似乎无法执行。我根本无法解释这一点。也许我现在没有我应该做的事情。

现在，如果我调试，我可以告诉人们股票信息是从网站返回的。首先是代码，然后是 JSON 数据。如果有人能帮助我让这件事工作，我将不胜感激。我已经摆弄了几个小时了。谢谢！换句话说，我的问题是如何将我从 Web 服务获得的数据显示在我的网页上？

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

现在这是我可以通过 Firefox 在调试器中看到的 JSON：

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"
                }
            }
        }
        ]
    }
});

您只看到 [对象]，因为它显示数据类型。 您需要获取对象属性才能获取数据。 JSON数据很容易从javascript访问，因为JSON代表JavaScript对象表示法。

一旦开始，它就非常简单，因为数据基本上由具有属性和对象列表的对象组成。 变量数据是您的根对象，您可以轻松访问其下的所有内容。

我将提供一些示例，说明您将如何访问数据中的某些内容：

属性"名称"：

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

属性"类名"：

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

它只是Javascript对象的文本表示。 "资源"是对象列表，"列表"是对象，"字段"是对象，"价格"是存储数据的键/值对。

在此处阅读更多内容： http://www.json.org/http://www.w3schools.com/json/

如果我误解了这个问题，请告诉我，我试了一下我认为你的意思。

将 JSON 对象视为常规 Javascript 对象。例如，如果要显示公司名称和价格：

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

若要以原始形式显示整个内容以进行调试，可以将其转换回 JSON 序列化字符串：

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

有关 JSON 的更多信息：https://developer.mozilla.org/en-US/docs/JSON

相关文章：