Как лучше обработать данные JSON с JS?

Question

[Александр Юдаев]

Доброе время суток,
Посоветуйте готовый скрипт или хорошее руководство, только не посылать на сайты Json, jQuery и т.д..

Начал работать с проектом в котором я получаю API в формата JSON (такие форматы [{..}], {...}, [{..}{..}], {[...]}).
Облазил весь интернет не нашел хорошего объяснения как работать с JSON в JS, только $.getJSON(), но тоже не совсем понятно для новичка (JSON2 не совсем понятен, нет объяснения).

Суть такова, прием данных как текст и boolean данных (true, false) и при клике сменять на противоположные данные, а так же вывод графиков (flot) из данных.

Спасибо заранее

Answer 1

[Сергей Протько]

jsonlint.com - проверяем содержимое и осознаем что пошло не так.

JSON имеет довольно строгие правила, в частности:

[{label: "value"}] // невалидно
[{"label": "value"}] // валидно
[{"label": 'value'}] // невалидно

И не путайте с хэшами и массивами в JS. У них только синтаксис похож, но JSON строже.

Comments

[Александр Юдаев]

Да, это я частично уже понял, но суть проблемы не решает, есть и валидный код, я просто не могу понять смысла работы, как работать с объектом и как с массивом.
Как получить данные, определить тип (объект или массив) а потом обработать и добавить в HTML.

[Сергей Протько]

@Alex_mc вы получаете с сервера JSON как текст/строку и скармливаете JSON.parse (jQuery это за вас должен делать если вы его попросили JSON принять). Он выплювывает все что там есть.

var data = JSON.parse('[{"label": "value", "data": [10, 11, 12]}, {"label": "value", "data": [10, 11, 12]}]');

data.forEach(function (item) {
    console.log('For %s we have data: %s', item.label, item.data.toString());
});

[Сергей Протько]

@Alex_mc можете в консоли запустить и баловаться.

[Евгений Петров]

@Fesor человек элементарно не разбирается в массивах и объектах, а пример с forEach выглядит как настоящий осиновый кол:)

[Александр Юдаев]

@Petroveg разбираюсь, просто с этим парсингом, да и столкнулся с API который никогда меня даже не интересовал, максимум что делал это запросы в nwitter и flickr. А тут такое, и упрямый разработчик со стороны server side, не желающий помогать :(

[Евгений Петров]

@Alex_mc судя по вашим вопросам не разбираетесь. Учите методы массивов, инструкции цикла. jQuery тут не причём, как и JSON.

[Александр Юдаев]

@Petroveg в любом случае большое спасибо за подсказки, еще раз пройдусь по руководству.

Answer 2

[Сергей Сенкевич]

learn.javascript.ru/json

Comments

[Александр Юдаев]

Там про JSon нативный, а мне надо с удаленного файла.

[Сергей Протько]

@Alex_mc а какая разница? JSON он и в африке JSON.

[Сергей Сенкевич]

получаете JSON через:
$.getJSON(url, data, function(data) {
// data - это и есть полученный и распарсенный JSON, т.е. обычный объект javascript
});

[Александр Юдаев]

@ssenkevich т.е. дата всегда превращается в объект, даже если будет массив изначально? и если я хочу преобразовать назад в массив, надо просто использовать push?

[Сергей Сенкевич]

@Alex_mc если изначально был массив, то и будет массив, ничего преобразовывать не надо.

[Сергей Сенкевич]

для вашего примера это будет выглядеть так:
$.getJSON("localhost/newdata.json", function (data) {
for (var i = 0; i < data.length; i++) {
var item = data[i];
console.log(item.label);
console.log(item.data);
}
});

[Александр Юдаев]

Спасибо, попробую, а как отправлять обработанные и измененные данные на сервер обратно? и запросы Ajax real time?
я привык работать с form method=post. но это не решение.

[Сергей Сенкевич]

var dataToSend = {
param1: 1,
param2: "something"
};
Если нужно обработать ответ от сервера, то так:
$.post(url, dataToSend, function(data) {
// обрабатываем ответ сервера
});
А если ответ не важен, то просто:
$.post(url, dataToSend);

[Александр Юдаев]

Огромное спасибо, теперь буду ковыряться.

Answer 3

[Евгений Петров]

Ваш вопрос связан вовсе не с JSON или jQuery.
Первое — лишь формат передачи данных, второе — существенно облегчение написания кода + дополнение тех свойств и методов, которые браузер нативно может и не поддерживать.

Обработка JSON — работа с объектами и массивами (а иначе есть обычный plain/text). Они просто перебираются в цикле.

Comments

[Александр Юдаев]

Суть я понимаю, о почему то у меня ничего не получается.

Один из примеров графика
JSON

[{label:"",data:[[1406851200,2],[1406937600,2],[1407024000,2],[1407110400,2],[1407196800,2],[1407283200,2]]}]

Если делаю

var data = [{label:"",data:[[1406851200,2],[1406937600,2],[1407024000,2],[1407110400,2],[1407196800,2],[1407283200,2]]}];
	var jsonString = data;
	var converted = eval(jsonString);
	console.log(converted[0].data[0]);

то все работает

А если так то нет,
JS Код

$.getJSON("http://localhost/newdata.json", function (data) {
	var jsonString = data;
	var converted = eval(jsonString);
	console.log(converted[0].data[0]);
});

вот не пойму что я делаю не так, и это только прием, про отправку вообще молчу, что-то я недопонимаю.

[Vit]

@Alex_mc $.getJSON() уже сразу в переменную data положит отпарсенный объект скорее всего, вам не надо его в eval пихать. И вообще eval такая штука, что ее желательно не надо нигде и никогда писать :)

[Сергей Протько]

@Alex_mc у вас невалидный JSON.

[Евгений Петров]

@Alex_mc вы не должны ни в коем случае делать eval самостоятельно. Я не буду читать лекцию, просто поверьте.

1. За преобразование в jQuery отвечает свой метод, который неявно будет вызван, если указать в соответствующий dataType в методе ajax. Вы уже используете явное указание в виде метода getJSON, который кроме JSON ничего вернуть не может в принципе.
Примерно так

$.getJSON('http://localhost/newdata.json', function (data) {
	console.log(data[0]);
});

2. Каждое имя параметра объекта должно быть заключено в двойные кавычки. Таковы требования.
Примерно так

[
	{
		"label":"",
		"data":[
			[1406851200,2],
			[1406937600,2],
			[1407024000,2],
			[1407110400,2],
			[1407196800,2],
			[1407283200,2]
		]
	}
]

[Андрей Федоров]

А еще что бы не делать eval, есть такая функция JSON.stringify(string JSONString) - правда, если мне не изменяет память, JSON не везде есть, нужно ставить билиотеку для IE8 итп