Question

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

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

Answer 1

在您的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

从JSON url获取

1 个答案: