从JSON url获取

时间:2014-03-28 00:18:37

标签: javascript html json fetch key-value

我是javascript的菜鸟,我正在试图弄清楚如何从网址获取JSON数据并将其组织成月份的可视化表示。这是一个问题:

数据:https://api.goodwillwa.org/stores?group_level=3

{
    key: [
    year,
    month,
    day
    ],

    value: [
    totalTransactions,
    totalSales,
    totalDiscounts,
    totalItemsSold
    ]
}

目标:使用客户端javascript获取json数据并创建可视化 按月分类的数据。您可以使用任何有用的库。简洁的额外点。

我将所有内容放入网页并尝试将其写在页面上:

<!DOCTYPE html)
<html>
    <head>
    <meta charset="utf-8">
    <title>Code Test</title>

    </head>
    <body>
        <h1 id="title">This is the month</h1>
        <script>
            function codeTest(key, value)
            {
            // code will fetch the json data structure and disply it in the html document


            }

        </script>
        <p id="new"></p>
        <button type="button" onclick="codeTest()"> Display information</button>
    </body> 
</html>

我试图让它显示为空白,直到按下按钮,这将导致它显示在屏幕上。任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

在您的onclick属性中,您分配对codeTest()的调用,但是当您的codeTest定义需要一个键和值aka codeTest(key,value)时,参数为空(在括号内也没有任何内容)。

根据我的理解,你会希望codeTest不带参数,看起来像这样:

function codetest(){
    $.ajax({
        url:your url in "string" format,
        dataType:"json"
        "success":function(resp){
             // resp is an object
             // so you do resp.key to get the associated value
             // so assign the data you get in resp to variables you have in your webpage JS
             // then assign your HTML values to the JS variables
        }
    });
}

您的网址应该为您提供字符串化版本的JSON数据。

您可能希望将数据重新格式化为:

{
    //key:value
    "year":"2014",
    "month":"march",
    "day":"27",
    "totalTransactions":"alot",
    "totalSales":"starbucks level",
    "totalDiscounts":"none hehe",
    "totalItemsSold":"alot alot"

}

这是数据的一个JSON“对象”...如果你有更多,那么你需要这些对象的数组和稍微不同的方法。让我知道 - Niko hth