JSON для начинающих, с использованием javascript и jQuery

JavaScript позволяет нам не только для добавлять интерактивность веб-страницам, но делает возможным выполнять задачи, которые когда-то принадлежали серверам. JSON обеспечивает простой способ для создания и хранения структурированных данных на JavaScript. JSON очень популярен и является отличной альтернативой XML. JSON (объектная нотация JavaScript), как следует из названия, основан на создании объектов javascript. Объектами JavaScript можно легко манипулировать, разбирать, используя тот же JavaScript.

В отличие от XML, JSON предложения легко составляются как человеком, так и компьютером. Данные в JSON формате можно, например, присвоить переменной (этим мы создаем объект); затем эти данные можно прочитать посредством вновь созданного объекта.

<script>
    var data={ "firstName" : "Ray" };
    alert(data.firstName);
</script>

demo

Во-первых, мы создаем переменную для хранения наших данных, и затем мы, используя JSON, определяем объект. Наш объект довольно прост: поле firstName и значение Ray. Строки в JSON обязательно заключать в кавычки. Если вы используете числа, кавычки необязательны.

Данный пример выведет в браузере значение свойства firstName.

Создание объекта placeholder

Давайте создадим более реалистичный пример: вставим наши JSON данные в объект DOM.

<div id="placeholder"></div>

var data={"firstName":"Ray"};
        document.getElementById("placeholder").innerHTML=data.firstName;

Сейчас мы, вместо вывода предупреждения, помещаем данные внутрь элемента HTML. JSON данные, конечно, могут быть намного сложнее. Давайте попытаемся добавить еще несколько полей.

<div id="placeholder"></div>

data={
    "firstName":"Ray",
    "lastName":"Villalobos",
    "joined":2012
  };
  document.getElementById("placeholder").innerHTML=data.firstName+" "+data.lastName+" "+data.joined;

demo

Отметьте, что данные JSON, для лучшего понимания, отформатированы определенным образом. Поле "joined" имеет значение 2012, которому не требуются кавычки, так как это число. Давайте рассмотрим что-то более сложное.

Добавляем массивы

Что если мы хотим ввести группу людей...тогда необходимо использовать массивы. Массив в JSON можно создать при помощи квадратных скобок. Давайте посмотрим, как наши данные будут смотреться для нескольких пользователей.

var data={"users":[
        {
            "firstName":"Ray",
            "lastName":"Villalobos",
            "joined":2012
        },
        {
            "firstName":"John",
            "lastName":"Jones",
            "joined":2010
        }
]}

document.getElementById("placeholder").innerHTML=data.users[0].firstName + " " + data.users[0].lastName+" "+ data.users[0].joined;

demo

Выглядит немного сложнее, но в действительности не сложно для понимания. Объект JSON создается при помощи фигурных скобок; массив создается при помощи квадратных скобок. Итак, чтобы организовать наши данные, мы создали объект users, в который поместили массив. В массиве располагаются другие объекты. Каждая пара (имя/значение) разделяются запятой.

Обратите внимание, как изменился код для вставки имени. Мы подключили новый объект users и затем при помощи квадратных скобок указали на первый элемент в массиве. Добавим еще один уровень к структуре наших данных.

    var data={"users":[
            {
                "firstName":"Ray",
                "lastName":"Villalobos",
                "joined": {
                    "month":"January",
                    "day":12,
                    "year":2012
                }
            },
            {
                "firstName":"John",
                "lastName":"Jones",
                "joined": {
                    "month":"April",
                    "day":28,
                    "year":2010
                }
            }
    ]}

    document.getElementById("placeholder").innerHTML=data.users[0].firstName + " " + data.users[0].lastName+"--"+ data.users[0].joined.month;

demo

Теперь свойство joined содержит объект с несколькими полями; использовать массив нет необходимости, поэтому мы используем объектную нотацию. Теперь у нас есть данные на нескольких пользователей, пришло время пройтись по каждому пользователю и вывести их в списке.

Реализуем список из пользователей (проходим по объекту JSON)

Итак, воспользуемся javascript'ом и создадим список пользователей.

    var data = { "users":[
            {
                "firstName":"Ray",
                "lastName":"Villalobos",
                "joined": {
                    "month":"January",
                    "day":12,
                    "year":2012
                }
            },
            {
                "firstName":"John",
                "lastName":"Jones",
                "joined": {
                    "month":"April",
                    "day":28,
                    "year":2010
                }
            }
    ]}

    var output="<ul>";
    for (var i in data.users) {
        output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + "--" + data.users[i].joined.month+"</li>";
    }
    output+="</ul>";

    document.getElementById("placeholder").innerHTML=output;

demo

Для перебора всех свойств объекта существует конструкция for..in:

for(var key in object) {

  // key - название свойства

  // object[key] - значение свойства

  ...

}

Здесь мы, проходимся по всем элементам массива; сохраняем данные в переменной output и помещаем данные в элемент с id равным placeholder. вы можете сказать, что наши данные строятся немного медленно.

Читаем JSON из внешнего файла

Было бы неплохо сохранить данные на внешний файл и прочитать их по мере надобности. Я собираюсь использовать библиотеку jQuery и поэтому для начала нам потребуется подключить библиотеку jQuery; затем вызовем функцию getJSON. Вот как выглядит наш код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>JSON Sample</title>
</head>
<body>
    <div id="placeholder"></div>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>

  $.getJSON('data.json', function(data) {
        var output="<ul>";
        for (var i in data.users) {
            output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + "--" + data.users[i].joined.month+"</li>";
        }

        output+="</ul>";
        document.getElementById("placeholder").innerHTML=output;
  });

    </script>
</body>
</html>

В значительной степени это тот же самый код, но данные выведены наружу. Мы просто обернули все функцией getJSON, которая делает всю тяжелую работу по чтению файла. Файл с данными data.json, предположим, находится в том же каталоге и выглядит следующим образом:

{"users":[
        {
            "firstName":"Ray",
            "lastName":"Villalobos",
            "joined": {
                "month":"January",
                "day":12,
                "year":2012
            }
        },
        {
            "firstName":"John",
            "lastName":"Jones",
            "joined": {
                "month":"April",
                "day":28,
                "year":2010
            }
        }
]}

Как видите, JSON реально легко читается, и как только вы привыкните в скобкам, вам станет легко кодировать.