Json в python

Dynamic JSONP Result

The examples above are still very static.


Make the example dynamic by sending JSON to the php file, and let the php file return a JSON object based on the information it gets.

PHP file

<?phpheader(«Content-Type: application/json; charset=utf-8»);$obj = json_decode($_GET, false);$conn = new mysqli(«myServer», «myUser», «myPassword», «Northwind»); $result = $conn->query(«SELECT name FROM «.$obj->$table.» LIMIT «.$obj->$limit);$outp = array(); $outp = $result->fetch_all(MYSQLI_ASSOC);echo «myFunc(«.json_encode($outp).»)»;?>

PHP File explained:

  • Convert the request into an object, using the PHP function json_decode().
  • Access the database, and fill an array with the requested data.
  • Add the array to an object.
  • Convert the array into JSON using the json_encode() function.
  • Wrap «myFunc()» around the return object.

JavaScript Example

The «myFunc» function will be called from the php file:

function clickButton() {  var obj, s  obj = { table: «products», limit: 10 };   s = document.createElement(«script»);  s.src = «jsonp_demo_db.php?x=» + JSON.stringify(obj);  document.body.appendChild(s); }function myFunc(myObj) {  var x, txt = «»;  for (x in myObj) {    txt += myObj.name + «<br>»;  }  document.getElementById(«demo»).innerHTML = txt;}

Data bind

Самый популярный и простой способ — вы просто указываете класс, который нужно преобразовать в json, может быть часть полей отмечаете аннотациями (а зачастую даже это необязательно), а библиотека сама превращает этот класс и всю его иерархию классов в json.

Плюсы: наиболее простой из всех

Минусы: скорость и память. Большинство библиотек использует рефлексию и т.п. методы работы с Java классами (хотя не все), что очевидно не очень быстро. К тому же, весь json файл сразу превращается в Java объекты, что может просто исчерпать всю доступную память, если вы попытаетесь обработать очень большой json.

Вывод: если нет проблем с производительностью, памятью и вы не собираетесь обрабатывать многогигабайтные json’ы скорее всего самый лучший способ.

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

Для чего используется JSON?

Наиболее частое распространенное использование JSON — пересылка данных от сервера к браузеру. Обычно данные JSON доставляются с помощью AJAX, который позволяет обмениваться данными браузеру и серверу без необходимости перезагружать страницу.

Пример:

  1. Пользователь нажимает миниатюру продукта в онлайн магазине.
  2. JavaScript, выполняющийся на браузере, генерирует запрос AJAX к скрипту PHP, запущенному на сервере, передавая ID выбранного продукта.
  3. Скрипт PHP получает название продукта, описание, цену и другую информацию из базы данных. Затем составляет из данных строку JSON и отсылает ее браузеру.
  4. JavaScript, выполняющийся на браузере, получает строку JSON, декодирует ее и выводит информацию о продукте на странице для пользователя.

Также можно использовать JSON для отправки данных от браузера на сервер, передавая строку JSON в качестве параметра запросов GET или POST. Но данный метод имеет меньшее распространение, так как передача данных через запросы AJAX может быть упрощена. Например, ID продукта может быть включен в адрес URL как часть запроса GET.

Библиотека jQuery имеет несколько методов, например,  и , которые упрощают получение данных с помощью JSON через запросы AJAX.

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

Как создать строку JSON?

Есть несколько основных правил для создания строки JSON:

  • Строка JSON содержит либо массив значений, либо объект (ассоциативный массив пар имя/значение).
  • Массив заключается в квадратные скобки ( и ) и содержит разделенный запятой список значений.
  • Объект заключается в фигурные скобки ( и ) и содержит разделенный запятой список пар имя/значение.
  • Пара имя/значение состоит из имени поля, заключенного в двойные кавычки, за которым следует двоеточие () и значение поля.
  • Значение в массиве или объекте может быть:
    • Числом (целым или с плавающей точкой)
    • Строкой (в двойных кавычках)
    • Логическим значением ( или )
    • Другим массивом (заключенным в квадратные скобки)
    • Другой объект (заключенный в фигурные скобки)
    • Значение

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

Как устроен этот формат

Допу­стим, у нас есть мага­зин с систе­мой бону­сов, кото­рые начис­ля­ют­ся по ски­доч­ной кар­те. Когда про­да­вец счи­ты­ва­ет кар­ту, он дол­жен полу­чить от сер­ве­ра такие дан­ные:

  • имя,
  • фами­лию,
  • теле­фон,
  • город,
  • воз­раст,
  • коли­че­ство бонус­ных бал­лов,
  • три преды­ду­щие покуп­ки (что­бы поре­ко­мен­до­вать к ним что-то под­хо­дя­щее).

А теперь посмот­ри­те на JSON-ответ, кото­рый полу­чит про­да­вец после счи­ты­ва­ния кар­ты:

Общее пра­ви­ло такое: сна­ча­ла все­гда идёт назва­ние какого-то поля, а через двое­то­чие — его зна­че­ние. Назва­ния все­гда берут­ся в двой­ные кавыч­ки, стро­ко­вые зна­че­ния — тоже.

Ещё есть такое:

  • вло­жен­ные объ­ек­ты берут­ся в фигур­ные скоб­ки;
  • мас­си­вы берут­ся в пря­мо­уголь­ные скоб­ки;
  • после каж­дой пары «свой­ство: зна­че­ние» долж­на сто­ять запя­тая (в самом кон­це — не ста­вит­ся).

Так как JSON — уни­вер­саль­ный фор­мат пере­да­чи дан­ных, то он может рабо­тать толь­ко с теми дан­ны­ми, кото­рые есть в боль­шин­стве язы­ков:

  • стро­ки — тоже, как и назва­ния, берут­ся в двой­ные кавыч­ки;
  • чис­ла, мож­но дроб­ные;
  • логи­че­ские зна­че­ния true или false; мас­си­вы или объ­ек­ты.

То, что не вхо­дит в этот спи­сок, JSON не обра­бо­та­ет и не выдаст сооб­ще­ние об ошиб­ке, пото­му что JSON — это про­сто фор­мат дан­ных и за его пра­виль­но­стью дол­жен сле­дить про­грам­мист.

Что такое JSON?

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

После создания строки JSON, ее легко отправить другому приложению или в другое место сети, так как она представляет собой простой текст.

JSON имеет следующие преимущества:

  • Он компактен.
  • Его предложения легко читаются и составляются как человеком, так и компьютером.
  • Его легко преобразовать в структуру данных для большинства языков программирования (числа, строки, логические переменные, массивы и так далее)
  • Многие языки программирования имеют функции и библиотеки для чтения и создания структур JSON.

Название JSON означает JavaScript Object Notation (представление объектов JavaScript). Как и представляет имя, он основан на способе определения объектов (очень похоже на создание ассоциативных массивов в других языках) и массивов.

JSON (JavaScript Object Notation)

JSON is a format for storing and transporting data.

JSON is text, and text can be transported anywhere, and read by any programming language.

JavaScript Objects can be converted into JSON, and JSON can be converted back into JavaScript Objects.

This way we can work with the data as JavaScript objects, with no complicated parsing or translations.

Example

Sending JSON:

// a JavaScript object…:var myObj = { «name»:»John», «age»:31, «city»:»New York» };// …converted into JSON:var myJSON = JSON.stringify(myObj);// send JSON:window.location = «demo_json.php?x=» + myJSON;


For a tutorial about JSON, read our JSON Tutorial.

More Examples

Example

Receiving JSON:

// myJSON is text received in JSON format.// Convert JSON into a JavaScript object:var myObj = JSON.parse(myJSON);document.getElementById(«demo»).innerHTML = myObj.name;

Example

Storing data as JSON, using localStorage

// Storing data:myObj = { «name»:»John», «age»:31, «city»:»New York» };myJSON = JSON.stringify(myObj);localStorage.setItem(«testJSON», myJSON); // Retrieving data:text = localStorage.getItem(«testJSON»);obj = JSON.parse(text);document.getElementById(«demo»).innerHTML = obj.name;

Learn more about JSON in our JSON tutorial.

GSON

Где взять: здесь / репозиторий на github / или через Maven и пр.

Документация: http://www.studytrails.com/java/json/java-google-json-introduction/

Позволяет парсить Json также, как и Json-simple, т.е. используя и (см. документацию), но имеет более мощный инструмент парсинга. Достаточно создать классы, которые повторяют структуру Json’а. Для парсинга Json из вопроса создадим классы:

Теперь достаточно написать:

Всё! Магия! Чудо! Теперь в лежит объект с типом , в котором находятся данные именно с теми типами, которые были указаны в созданных классах! Теперь можно работать с любым типом, как это привыкли всегда делать: String, Integer, List, Map и всё остальное.

Пример парсинга в :

…… JSON для разбора:

…… Классы (POJO):

…… Сам разбор выглядит так:

Всё.

Дополнительно в GSON можно использовать аннотации, например: исключить указанные поля при парсинге, поменять имя переменной (например не , а ) и многое другое. Подробнее см. в документации.

Exceptions

Parsing Dates

Date objects are not allowed in JSON.

If you need to include a date, write it as a string.

You can convert it back into a date object later:

Example

Convert a string into a date:

var text = ‘{ «name»:»John», «birth»:»1986-12-14″, «city»:»New York»}’; var obj = JSON.parse(text);obj.birth = new Date(obj.birth);document.getElementById(«demo»).innerHTML = obj.name + «, » + obj.birth;

Or, you can use the second parameter, of the function, called reviver.

The reviver parameter is a function that checks each property, before returning the value.

Example

Convert a string into a date, using the reviver function:

var text = ‘{ «name»:»John», «birth»:»1986-12-14″, «city»:»New York»}’; var obj = JSON.parse(text, function (key, value) {  if (key == «birth») {    return new Date(value);  } else {    return value;  }});document.getElementById(«demo»).innerHTML = obj.name + «, » + obj.birth;

Parsing Functions

Functions are not allowed in JSON.

If you need to include a function, write it as a string.

You can convert it back into a function later:

Example

Convert a string into a function:

var text = ‘{ «name»:»John», «age»:»function () {return 30;}», «city»:»New York»}’; var obj = JSON.parse(text);obj.age = eval(«(» + obj.age + «)»);document.getElementById(«demo»).innerHTML = obj.name + «, » + obj.age();

You should avoid using functions in JSON, the functions will lose their scope, and you would have to use to convert them back into functions.

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

5 последних уроков рубрики «Разное»

  • Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

  • Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов


    Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

  • Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

  • Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

Converting a JSON Text to a JavaScript Object

A common use of JSON is to read data from a web server, and display the data in a web page.

For simplicity, this can be demonstrated using a string as input.

First, create a JavaScript string containing JSON syntax:

var text = ‘{ «employees» : }’;

Then, use the JavaScript built-in function to convert the string into a JavaScript object:

var obj = JSON.parse(text);

Finally, use the new JavaScript object in your page:

Example

<p id=»demo»></p> <script> document.getElementById(«demo»).innerHTML = obj.employees.firstName + » » + obj.employees.lastName; </script>

You can read more about JSON in our JSON tutorial.

Исключения

Разбор дат

Объекты дат не допускаются в JSON.

Если вам нужно включить дату, запишите ее в виде строки.

Вы можете преобразовать его обратно в объект даты позже:

Пример

Преобразование строки в дату:

var text = ‘{«name»:»Андрей», «birth»:»1969-07-15″, «city»:»Пермь»}’; var obj = JSON.parse(text);obj.birth = new Date(obj.birth);document.getElementById(«demo»).innerHTML = obj.name + «, » + obj.birth;

Или вы можете использовать второй параметр , называемая reviver.

Параметр reviver — это функция, которая проверяет каждое свойство перед возвращением значения.

Пример

Преобразовать строку в дату, используя функцию восстановления:

var text = ‘{«name»:»Андрей», «birth»:»1969-07-15″, «city»:»Пермь»}’; var obj = JSON.parse(text, function (key, value) {  if (key == «birth») {    return new Date(value);  } else {    return value;  }});document.getElementById(«demo»).innerHTML = obj.name + «, » + obj.birth;

Парсинг функции

Функции не разрешены в JSON.

Если вам нужно включить функцию, запишите ее в виде строки.

Вы можете преобразовать его обратно в функцию позже:

Пример

Преобразование строки в функцию::

var text = ‘{«name»:»Андрей», «age»:»function () {return 50;}», «city»:»Пермь»}’; var obj = JSON.parse(text);obj.age = eval(«(» + obj.age + «)»);document.getElementById(«demo»).innerHTML = obj.name + «, » + obj.age();

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

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

HTML Table

Make an HTML table with data received as JSON:

Example


obj = { table: «customers», limit: 20 };dbParam = JSON.stringify(obj); xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() {  if (this.readyState == 4 && this.status == 200) {    myObj = JSON.parse(this.responseText);     txt += «<table border=’1′>»    for (x in myObj) {      txt += «<tr><td>» + myObj.name + «</td></tr>»;     }    txt += «</table>»     document.getElementById(«demo»).innerHTML = txt;  }}xmlhttp.open(«POST», «json_demo_db_post.php», true); xmlhttp.setRequestHeader(«Content-type», «application/x-www-form-urlencoded»); xmlhttp.send(«x=» + dbParam);

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

Example Explained

1: Create an array of objects.

Use an array literal to declare an array of objects.

Give each object two properties: display and url.

Name the array myArray:

myArray

var myArray = [ { «display»: «JavaScript Tutorial», «url»: «https://www.w3schools.com/js/default.asp» }, { «display»: «HTML Tutorial», «url»: «https://www.w3schools.com/html/default.asp» }, { «display»: «CSS Tutorial», «url»: «https://www.w3schools.com/css/default.asp» } ]

2: Create a JavaScript function to display the array. 

Create a function myFunction() that loops the array objects, and display the content as HTML links:

myFunction()

function myFunction(arr) {     var out = «»;    var i;     for(i = 0; i < arr.length; i++) {         out += ‘<a href=»‘ + arr.url + ‘»>’ + arr.display + ‘</a><br>’;     }     document.getElementById(«id01»).innerHTML = out; }

Call myFunction() with myArray as argument:

myFunction(myArray);

3: Create a text file

Put the array literal in a file named myTutorials.txt:

myTutorials.txt

[ { «display»: «JavaScript Tutorial», «url»: «https://www.w3schools.com/js/default.asp» }, { «display»: «HTML Tutorial», «url»: «https://www.w3schools.com/html/default.asp» }, { «display»: «CSS Tutorial», «url»: «https://www.w3schools.com/css/default.asp» } ]

4: Read the text file with an XMLHttpRequest

Write an XMLHttpRequest to read the text file, and use myFunction() to display the array:

XMLHttpRequest

var xmlhttp = new XMLHttpRequest();var url = «myTutorials.txt»; xmlhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {    var myArr = JSON.parse(this.responseText);    myFunction(myArr);    }};xmlhttp.open(«GET», url, true);xmlhttp.send();

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

Dynamic HTML Table

Make the HTML table based on the value of a drop down menu:

Choose an option:CustomersProductsSuppliers

Example

<select id=»myselect» onchange=»change_myselect(this.value)»>  <option value=»»>Choose an option:</option>  <option value=»customers»>Customers</option>  <option value=»products»>Products</option>  <option value=»suppliers»>Suppliers</option></select><script>function change_myselect(sel) {  var obj, dbParam, xmlhttp, myObj, x, txt = «»;  obj = { table: sel, limit: 20 };  dbParam = JSON.stringify(obj);  xmlhttp = new XMLHttpRequest();  xmlhttp.onreadystatechange = function() {    if (this.readyState == 4 && this.status == 200) {      myObj = JSON.parse(this.responseText);       txt += «<table border=’1′>»      for (x in myObj) {        txt += «<tr><td>» + myObj.name + «</td></tr>»;       }      txt += «</table>»       document.getElementById(«demo»).innerHTML = txt;     }  };  xmlhttp.open(«POST», «json_demo_html_table.php», true);  xmlhttp.setRequestHeader(«Content-type», «application/x-www-form-urlencoded»);  xmlhttp.send(«x=» + dbParam);}</script>

Сравнение JSON и XML

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

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

Вот как будет выглядеть выше приведенный пример объекта на XML:

<object>
  <property>
    <key>orderID</key>
    <number>12345</number>
  </property>
  <property>
    <key>shopperName</key>
    <string>Ваня Иванов</string>
  </property>
  <property>
    <key>shopperEmail</key>
    <string>ivanov@example.com</string>
  </property>
  <property>
    <key>contents</key>
    <array>
      <object>
        <property>
          <key>productID</key>
          <number>34</number>
        </property>
        <property>
          <key>productName</key>
          <string>Супер товар</string>
        </property>
        <property>
          <key>quantity</key>
          <number>1</number>
        </property>       
      </object>
      <object>
        <property>
          <key>productID</key>
          <number>56</number>
        </property>
        <property>
          <key>productName</key>
          <string>Чудо товар</string>
        </property>
        <property>
          <key>quantity</key>
          <number>3</number>
        </property>
      </object>
    </array>
  </property>
  <property>
    <key>orderCompleted</key>
    <boolean>true</boolean>
  </property> 
</object>

Версия XML имеет существенно больший размер. В действительности она имеет длину 1128 символов, а вариант JSON — только 323 символа. Версию XML также достаточно трудно воспринимать.

Конечно, это радикальный пример. И возможно создать более компактную запись XML. Но даже она будет существенно длиннее эквивалента на JSON.

JS Учебник

JS ГлавнаяJS ВведениеJS УстановкаJS ВыводJS СинтаксисJS ЗаявленияJS КомментарииJS ПеременныеJS ОператорыJS АрифметикаJS ПрисваиванияJS Типы данныхJS ФункцииJS ОбъектыJS ОбластьJS СобытияJS СтрокиJS Методы строкJS ЧислаJS Методы чиселJS МассивыJS Методы массиваJS Сортировка массиваJS Итерация массиваJS ДатыJS Формат датыJS Метод получения датJS Методы набора…JS Математические…JS Случайные числаJS БулевыJS Сравнение…JS Заявления if…elseJS Заявление switchJS Цикл forJS Цикл whileJS Заявление break…JS Преобразование…JS Битовые…JS Регулярные выраженияJS ОшибкиJS ОтладчикJS ПодъемныйJS СтрогийJS Ключевое слово thisJS Руководство стиляJS ПрактикаJS Распространенные ошибкиJS ЭффективностьJS Зарезервированные словаJS ВерсииJS Версия ES5JS Версия ES6JS JSON

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

HTML Drop Down List

Make an HTML drop down list with data received as JSON:

Example

obj = { table: «customers», limit: 20 };dbParam = JSON.stringify(obj); xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() {   if (this.readyState == 4 && this.status == 200) {    myObj = JSON.parse(this.responseText);     txt += «<select>»    for (x in myObj) {       txt += «<option>» + myObj.name;    }    txt += «</select>»     document.getElementById(«demo»).innerHTML = txt;  }}xmlhttp.open(«POST», «json_demo_html_table.php», true); xmlhttp.setRequestHeader(«Content-type», «application/x-www-form-urlencoded»); xmlhttp.send(«x=» + dbParam);

Простой пример строки JSON

Ниже приводится пример оформления заказа в формате JSON:

{
  "orderID": 12345,
  "shopperName": "Ваня Иванов",
  "shopperEmail": "ivanov@example.com",
  "contents": ,
  "orderCompleted": true
}

Рассмотрим строку подробно:

  • Мы создаем объект с помощью фигурных скобок  ( и ).
  • В объекте есть несколько пар имя/значение:
    Свойство с именем и целочисленным значением 
    свойство с именем и строковым значением
    Свойство с именем и строковым значением
    Свойство с именем , значение которого является массивом
    Свойство с именем и логическим значением
  • В массиве есть 2 объекта, представляющие отдельные позиции в заказе. Каждый объект содержит 3 свойства: , , и .

Кстати, так как JSON основан на объявлении объектов JavaScript, то вы можете быстро и просто сделать выше приведенную строку JSON объектом JavaScript:

<script type="text/javascript">
var cart = {
  "orderID": 12345,
  "shopperName": "Ваня Иванов",
  "shopperEmail": "ivanov@example.com",
  "contents": ,
  "orderCompleted": true
};
</script>

С этим читают