Question

我想通过手动创建JSON数据流来调试客户端应用程序。我希望谷歌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客户端的工作。但是，我不确定如何做到这一点。感谢投入。

Answer 1

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

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

使用<script>标记

将此文件添加到您的页面

然后使用tempData对象作为函数调用中的数据

Answer 2

您对创建文本文件的想法肯定是正确的。实际上，您需要做的就是：将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'调用中使用$.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数组也存在安全问题。我认为它已经在现代浏览器中得到了修复，但顶级对象无论如何都更加通用。

发送JSON数据以进行调试

2 个答案: