2

我想通过手动创建 JSON 数据流来调试客户端应用程序。我希望 Google Chrome 的调试控制台能够做到这一点。

例如，考虑以下情况。我想测试列表填充代码段如何工作。假设我有以下格式的项目对象：{“name”：“test”，“price”：“10”}。我不想在服务器上实际编码，而是想在本地生成这些数据并将其发送用于测试目的。

Javascript 看起来像这样：

//JQuery AJAX call to request data
$.getJSON('some_url', function(data) {

     //Go through each received JSON element (assuming array input) and
     //log its key value pair to the debug console (using Google Chrome as example)
     $.each(data, function(key, val) {
          console.log("Key is: " + key + " value is: " + value);
     }

});//End getJSON

我想制作一个数据列表（可能在文本文件中？），如下所示：

{"name" : "paper", "price" : "5"}
{"name" : "bear repellent", "price" : "10"}

然后我想将此数据传递给函数以查看它是否有效并查看输出（由 console.log() 调用在此处完成）。我知道这有点像单元测试，我的研究表明这可能是 REST 客户端的工作。但是，我不确定如何做到这一点。输入表示赞赏。

4

2 回答 2

0

只需按以下格式创建一个js文件

var tempData = [
   {name : "paper", price : 5},
   {name : "bear repellent", price : 10},
];

<script>使用标签将此文件添加到您的页面

然后将该tempData对象用作函数调用中的数据

于 2013-06-19T16:44:59.730 回答
0

您创建文本文件的想法绝对是正确的。事实上，这就是您需要做的所有事情：将您的 JSON 数据放在一个文本文件中，并在您的$.getJSON()调用中使用该文本文件的 URL。对于纯 JSON，此文件需要从与您的 HTML 页面相同的域加载（实际上您通常会在$.getJSON()调用中使用相对 URL。

因此，第一件事是为您的数据制作有效的 JSON，但目前还没有：

[
    { "name": "paper", "price": "5" },
    { "name": "bear repellent", "price": "10" }
]

空格不重要；你可以用任何你喜欢的方式格式化空格。

您可以通过将其粘贴到jsonlint.com来测试您是否拥有有效的 JSON 。

因此，如果您将该数据放在'testdata.json'与您的 HTML 页面位于同一目录中的文本文件中，那么您可以简单地在调用'testdata.json'中用作您的 URL 。$.getJSON()

此外，这段代码在编写时并不完全有意义，或者至少名称具有误导性。

// Go through each received JSON element (assuming array input) and
// log its key value pair to the debug console (using Google Chrome
// as example)
$.each(data, function(key, value) {
    console.log("Key is: " + key + " value is: " + value);
});

（我在这个代码副本中修正了几个简单的错别字。）

这$.each()将遍历整个数组，因此您的console.log()调用将打印：

Key is: 0 value is: [object Object]
Key is: 1 value is: [object Object]

现在，要获得更有用的打印输出，您可以做的一件事是在console.log()调用中使用由逗号分隔的单个参数，而不是字符串连接：

console.log( "Key is: ", key, " value is: ", value );

因为value是一个对象，console.log()它足够聪明，可以这样记录它——如果你给它一个机会，通过像这样将它作为一个单独的参数传递它来这样做。当它与运算符连接成一个字符串时，+你会丢失它。

但更重要的是，你想要的代码可能是这样的：

// Loop through the elements of the JSON array, and for each one
// log its `name` and `price` properties.
$.each( data, function( i, item ) {
    console.log(
        'Item number:', i,
        '| name:', item.name,
        '| price:', item.price
    );
});

应该打印：

Item number: 0 | name: paper | price: 5
Item number: 1 | name: bear repellent | price: 10

（竖线并不重要；它们只是为了稍微格式化输出。）

我还建议不要将数组用作 JSON 数据的顶层，而是将其设为对象并将数组放入其中：

{
    "items": [
        { "name": "paper", "price": "5" },
        { "name": "bear repellent", "price": "10" }
    ]
}

您需要在代码中进行的唯一更改是使用$.each(data.items,...)而不是$.each(data,...).

这样做的主要原因是它更面向未来：如果您稍后想向 JSON 响应添加不属于数组中的单个项目但适用于整个数据/数组的信息怎么办？在顶层使用对象使这变得简单：

{
    "someglobalthing": "Hello world!",
    "items": [
        { "name": "paper", "price": "5" },
        { "name": "bear repellent", "price": "10" }
    ]
}

并且您引用的代码json.items根本不必更改。

顶级 JSON 数组还可能存在安全问题。我认为它在现代浏览器中是固定的，但无论如何顶级对象更加通用。

于 2013-06-19T17:17:01.853 回答