Отправлять данные JSON для отладки

Question

Я хотел бы отлаживать клиентские приложения вручную, создавая поток данных 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. Однако я не уверен, как это сделать. Вход оценивается.

Answer 1

Вы определенно на правильном пути с вашей идеей создания текстового файла. Фактически, это все, что вам нужно сделать: поместите свои данные JSON в текстовый файл и используйте URL-адрес этого текстового файла в своем $.getJSON() вызовах. Для чистого JSON этот файл нужно будет загружать из того же домена, что и ваша HTML-страница (и на самом деле вы обычно используете относительный URL-адрес в вызове $.getJSON().

Итак, первое, что нужно сделать для JSON для вашего данные, которые она еще не:

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

пробельный не имеет значения, вы можете форматировать пробельные так, как вам нравится

вы можете проверить, что у вас есть действительный JSON, вставив его в jsonlint.com..

Итак, если вы поместите эти данные в текстовый файл '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 верхнего уровня. Я думаю, что это исправлено в современных браузерах, но объект верхнего уровня более универсален в любом случае.

Answer 2

просто создать файл JS в следующем формате

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

Добавить этот файл на страницу с помощью <script> тега

Затем используйте tempData объект в качестве данных при вызове функции