Что такое JSON

Недав­но мы дела­ли соб­ствен­ные мене­джер задач, потом тек­сто­вый редак­тор и стра­ни­цу с шаб­ло­на­ми отве­тов на пись­ма. Они отлич­но рабо­та­ют, но толь­ко в пре­де­лах одно­го бра­у­зе­ра. Все они хра­ни­ли дан­ные либо внут­ри само­го доку­мен­та, либо в отсе­ке Localstorage — это спе­ци­аль­ная память бра­у­зе­ра, кото­рая при­вя­за­на к кон­крет­ной стра­ни­це. Дан­ные — это наши тек­сты, шаб­ло­ны, зада­чи, то есть всё то полез­ное, ради чего мы эти про­грам­мы заво­ди­ли.

❌ Про­бле­ма: эти дан­ные неудоб­но хра­нить. Если они в доку­мен­те, их нуж­но впи­сы­вать туда вруч­ную через редак­тор кода. А если дан­ные в LocalStorage, то мы уже не можем сме­нить бра­у­зер или зай­ти с мобил­ки — дан­ные не будут доступ­ны.

✅ Что­бы решить эту про­бле­му, раз­ра­бот­чи­ки при­ду­ма­ли спе­ци­аль­ный фор­мат пере­да­чи дан­ных на сер­вер и обрат­но — JSON (JavaScript Object Notation). Мож­но пере­ве­сти как «спо­соб запи­си объ­ек­тов в JavaScript». Фор­мат ока­зал­ся настоль­ко удо­бен, что его ста­ли под­дер­жи­вать прак­ти­че­ски все попу­ляр­ные язы­ки про­грам­ми­ро­ва­ния.

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

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

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

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

    
language: JSON
{

  "firstname": "Михаил",

  "lastname": "Максимов",

  "phone": "+79201234567",

  "city": "Москва",

  "age": 37,

  "bonus": 2000,

  "prev": ["Кроссовки", "Турник", "Зимняя куртка"]

}


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

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

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

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

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

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

Как работать с JSON в JavaScript

Для рабо­ты с этим фор­ма­том в JavaScript есть две спе­ци­аль­ные коман­ды:

  • JSON.stringify() — пере­во­дит объ­ект в JSON-строку, кото­рую мож­но отпра­вить на сер­вер;
  • JSON.parse() — наобо­рот, раз­би­ра­ет JSON-данные на состав­ля­ю­щие и отправ­ля­ет их в нуж­ные пере­мен­ные или объ­ек­ты.

Попро­бу­ем сде­лать то же самое, о чём мы гово­ри­ли в при­ме­ре про про­дав­ца, но на JavaScript. Что­бы было удоб­нее рабо­тать, мы заве­дём отдель­ный объ­ект, где будем хра­нить все теку­щие пара­мет­ры поку­па­те­ля. После это­го мы:

  • запол­ним все дан­ные в объ­ек­те вруч­ную;
  • пере­ве­дём его в JSON;
  • посмот­рим, как выгля­дит резуль­тат;
  • пере­ве­дём JSON обрат­но в объ­ект и убе­дим­ся, что всё про­шло как нуж­но.

Сам код мож­но запу­стить в кон­со­ли бра­у­зе­ра, что­бы уви­деть резуль­тат рабо­ты про­грам­мы.

    
language: JavaScript
// создаём объект, где будут храниться данные для бонусной программы

var person = {

  firstname: "Михаил",

  lastname: "Максимов",

  phone: "+79201234567",

  city: "Москва",

  age: 37,

  bonus: 2000,

  prev: ["Кроссовки", "Турник" ,"Зимняя куртка"]

};

 

// выводим содержимое объекта

console.log('Имя: ' + person.firstname);

console.log('Фамилия: ' + person.lastname);

console.log('Телефон: ' + person.phone);

console.log('Город: ' + person.city);

console.log('Возраст: ' + person.age);

console.log('Бонусы: ' + person.bonus);

console.log('Предыдущие покупки: ' + person.prev[0] + ' ' + person.prev[1] + ' '  + person.prev[2]);

 

// переводим объект в JSON-формат

var jsonData

jsonData = JSON.stringify(person);

 

// смотрим, что получилось

console.log(jsonData);

 

// переводим обратно в объект

person = JSON.parse(jsonData);


Ско­пи­ро­вать код
Код ско­пи­ро­ван

В кон­со­ли вид­но, что наша послед­няя коман­да выпол­ни­лась без оши­бок, и мы зано­во запол­ни­ли наш объ­ект нуж­ны­ми дан­ны­ми

Что дальше

Теперь нам нуж­но разо­брать­ся с тем, как отправ­лять и при­ни­мать наши JSON-данные с помо­щью запро­сов. Заод­но научим­ся сами про­грам­ми­ро­вать нуж­ное пове­де­ние сер­ве­ра, что­бы он хра­нил наши дан­ные и отда­вал их в нуж­ный момент. Под­пи­сы­вай­тесь, и мы вам обо всём сооб­щим. Мож­но на наш Теле­грам: @thecode.media