Processing json with javascript

Руководство по парсингу JSON в JavaScript

JSON означает JavaScript Object Notation. JSON — это чрезвычайно легкий формат обмена данными между сервером и клиентом, который можно быстро и легко анализировать и генерировать.

Как и XML, JSON также является текстовым форматом, который легко написать и легко понять как для людей, так и для компьютеров, но в отличие от XML структуры данных JSON занимают меньшую пропускную способность, чем их версии XML. JSON основан на двух основных структурах:

• Объект: он определяется как неупорядоченная коллекция пар ключ / значение ( key:value ). Каждый объект начинается с левой фигурной скобки < и заканчивается правой фигурной скобкой >. Несколько пар ключ / значение разделяются запятой , .
• Массив: он определяется как упорядоченный список значений. Массив начинается с левой скобки [ и заканчивается правой скобкой ] . Значения разделяются запятой , .

В JSON имена свойств или ключи всегда являются строками, а значение может быть string , number , true или false , null и даже object или array . Строки должны быть заключены в двойные кавычки » и могут содержать управляющие символы, такие как \n , \t и \ . Объект JSON может выглядеть следующим образом:

Пример массива JSON будет выглядеть примерно так:

JSON — это самый популярный и легкий текстовый формат обмена данными между различными платформами и операционными системами.

Разбор данных JSON в JavaScript

В JavaScript вы можете легко анализировать данные JSON, полученные с веб-сервера, используя метод JSON.parse() . Этот метод анализирует строку JSON и создает значение JavaScript или объект, описываемый строкой. Если данная строка не является допустимой JSON, вы получите синтаксическую ошибку.

Предположим, мы получили следующую JSON-кодированную строку с веб-сервера:

Теперь мы можем просто использовать метод JavaScript JSON.parse() , чтобы преобразовать эту строку JSON в объект JavaScript и получить доступ к отдельным значениям с помощью точечной нотации ( . ), Например:

// Получаем данные JSON в переменную var json = ''; // Преобразуем JSON в объект JS var obj = JSON.parse(json); // Доступ к индивидуальному значению из объекта JS alert(obj.name); // Вывод: Peter alert(obj.age); // Вывод: 22 alert(obj.country); // Вывод: United States

Пожалуйста, ознакомьтесь с руководством по синтаксическому анализу PHP JSON, чтобы узнать, как в ответ возвращать данные JSON с веб-сервера, а также как кодировать / декодировать данные JSON на стороне сервера с использованием PHP.

Разбор вложенных данных JSON в JavaScript

Объекты и массивы JSON также могут быть вложенными. Объект JSON может произвольно содержать другие объекты JSON, массивы, вложенные массивы, массивы объектов JSON и т. д. В следующем примере показано, как проанализировать вложенный объект JSON и извлечь все значения в JavaScript.

/* Хранение многострочной строки JSON в переменной JS используя новые литералы шаблона ES6 */ var json = ` < "book": < "name": "Harry Potter and the Goblet of Fire", "author": "J. K. Rowling", "year": 2000, "characters": ["Harry Potter", "Hermione Granger", "Ron Weasley"], "genre": "Fantasy Fiction", "price": < "paperback": "$10.40", "hardcover": "$20.32", "kindle": "$4.11" >> >`; // Преобразование объекта JSON в объект JS var obj = JSON.parse(json); // Рекурсивная функция для печати вложенных значений function printValues(obj) < for(var k in obj) < if(obj[k] instanceof Object) < printValues(obj[k]); >else < document.write(obj[k] + "
"); >; > >; // Печать всех значений из результирующего объекта printValues(obj); document.write("
"); // Печать одного значения document.write(obj["book"]["author"] + "
"); // Выводит: J. K. Rowling document.write(obj["book"]["characters"][0] + "
"); // Выводит: Harry Potter document.write(obj["book"]["price"]["hardcover"]); // Выводит: $20.32

Кодирование данных как JSON в JavaScript

Иногда объект JavaScript или значение из вашего кода необходимо передавать на сервер во время Ajax. JavaScript предоставляет для этой цели метод JSON.stringify() , который преобразует значение JavaScript в строку JSON, как показано ниже:

Stringify-объект JavaScript

В следующем примере показано, как преобразовать объект JavaScript в строку JSON:

// Образец объекта JS var obj = ; // Преобразование объекта JS в строку JSON var json = JSON.stringify(obj); alert(json);

Хотя объекты JavaScript и JSON выглядят очень похоже, но они не совсем одинаковы. Например, в JavaScript имена свойств объекта могут быть заключены в одинарные кавычки ( ‘. ‘ ), двойные кавычки ( «. » ) или же вы можете вообще опустить кавычки. Но в JSON все имена свойств должны быть заключены в двойные кавычки.

Stringify-массив JavaScript

Точно так же вы можете конвертировать массивы JavaScript в строки JSON, например:

// Образец массива JS var arr = ["Apple", "Banana", "Mango", "Orange", "Papaya"]; // Преобразование массива JS в строку JSON var json = JSON.stringify(arr); alert(json);

Не используйте функцию eval() для оценки данных JSON (включая определения функций в строке JSON и преобразование их обратно в исполняемые функции с помощью метода eval() ), поскольку это позволит злоумышленнику внедрить вредоносный код JavaScript в ваше приложение.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 3.7 / 5. Количество оценок: 3

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

Источник