JavaScript – формат JSON и примеры работы с ним

Александр Мальцев
Александр Мальцев
126K
41
Содержание:
  1. Понятие JSON
  2. Структура формата JSON
  3. Работа с JSON в JavaScript
  4. Преимущества формата JSON
  5. Работа с данными JSON после парсинга
  6. Комментарии

Урок, в котором рассматривается, что такое JSON и какие он имеет преимущества по сравнению с другими форматами данных.

Понятие JSON

JSON (JavaScript Object Notation) – это текстовый формат представления данных в нотации объекта JavaScript. Предназначен JSON, также как и некоторые другие форматы такие как XML и YAML, для обмена данными.

JavaScript – Что такое JSON

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

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

При веб-разработке JSON очень часто применяется в качестве формата для передачи информации от веб-сервера клиенту (веб-браузеру) при AJAX запросе.

Как выглядит этот процесс? Его можно представить в виде двух шагов. На первом шаге, сервер, по запросу пришедшему ему от клиента, сначала формирует некоторый набор данных в удобном формате, который затем можно было бы очень просто упаковать в строку JSON. Завершается работа на сервере отправкой JSON данных в качестве результата клиенту. На втором шаге, клиент получает в качестве ответа от сервера строку JSON и распаковывает её, т.е. переводит в JavaScript объект. После этого на клиенте выполняются дальнейшие с ними действия, например, выводятся на страницу.

Это один из примеров использования формата JSON. Но его применение не ограничивается только этим сценарием, их очень много и не только в веб.

В JSON, в отличие от XML и YAML, данные организованы также как в объекте JavaScript. Но JSON – это не объект, а строка. При этом не любой объект JavaScript может быть переведён один к одному в JSON. Например, если у объекта есть методы, то они при преобразовании в строку JSON будут проигнорированы и не включены в неё.

Структура формата JSON

Структура строки JSON практически ничем не отличается от записи JavaScript объекта.

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

Например:

// строка JSON
var jsonPerson = '{"name":"Иван","age":25}';

// объект JavaScript
var person = {
  name: "Иван",
  age: 25
};

Чтобы не усложнять доступ к данным, при задании ключам имён лучше придерживаться тех же правил, что и при именовании переменных.

Второе отличие заключается в том, что значение ключа в JSON можно задать только в одном из следующих форматов: string (строкой), number (числом), object (объектом), array (массивом), boolean (логическим значением true или false) или null (специальным значением JavaScript). Например, значение ключа в JSON не может быть функцией или датой (объектом типа Date).

// объект JavaScript
var person = {
  name: "Иван",
  birthDay: new Date(Date.UTC(1985, 03, 05)),
  getAge: function () {
    var ageDate = new Date(Date.now() - this.birthDay.getTime());
    return Math.abs(ageDate.getUTCFullYear() - 1970);
  }
};

// строка JSON
var jsonPerson = '{"name":"Иван","birthDay":"1985-04-05T00:00:00.000Z"}';

Пример JSON строки, состоящей из различных типов данных:

{
  "name": "Иван",
  "age": 37,
  "mother": {
    "name": "Ольга",
    "age": 58
  },
  "children": [
    "Маша",
    "Игорь",
    "Таня"
  ],
  "married": true,
  "dog": null
}

В ней ключ «name» имеет в качестве значения строку, «age» - число, «mother» - объект, состоящий из «name» и «age», «children» - массив, «married» - логический тип, «dog» - null.

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

Работа с JSON в JavaScript

Как было уже отмечено выше, JSON – это строка.

// переменная personData, содержит в качестве значения строку в формате JSON
var personData = '{"name":"Иван","age":37,"mother":{"name":"Ольга","age":58},"children":["Маша","Игорь","Таня"],"married": true,"dog":null}';

Работа с JSON в JavaScript обычно осуществляется в двух направлениях:

  • перевод строки JSON в объект (данный процесс ещё называют парсингом);
  • конвертирование объекта в строку JSON (другими словами действие обратное парсингу).

Парсинг JSON

Парсинг JSON (перевод строки JSON в объект JavaScript) осуществляется с помощью метода eval или parse.

Пример использования eval для парсинга JSON:

var person = eval('('+personData+')');

Метод eval не рекомендуется использовать так как он не безопасен. Так если кто-то сможет добавить скрипт в строку JSON, то он выполнится.

В JavaScript для парсинга строки в JSON рекомендуется использовать метод JSON.parse. Он такой уязвимости не имеет.

Использование метода JSON.parse:

// переменная person - это объект JavaScript, который получен путём парсинга строки JSON
var person = JSON.parse(personData);

Конвертирование объекта JavaScript в строку JSON

Перевод объекта JavaScript в строку JSON осуществляется с помощью метода JSON.stringify. Данный метод осуществляет действие обратное методу JSON.parse.

var personString = JSON.strigify(person);

Преимущества формата JSON

Формат представления данных JSON имеет следующие преимущества:

  • удобные и быстрые в работе методы, предназначенные для конвертации (парсинга) строки JSON в объект JavaScript и обратно;
  • понятная и простая структура данных;
  • очень маленький размер по сравнению с другими форматами данных (например XML). Это связано с тем, что формат JSON содержит минимальное возможное форматирование, т.е. при его написании используется всего несколько специальных знаков. Это очень важное преимущество, т.к. данные представленные в формате JSON будут быстрее загружаться, чем, если бы они были бы представлены в других форматах.

Из-за того что данный формат имеет очень много преимуществ он стал применяться не только в JavaScript, но и во многих других языках, таких как C, Ruby, Perl, Python, PHP и т.д.

Сравнение форматов JSON и XML

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

  1. При передаче некоторых данных размер JSON будет значительно меньше, чем размер XML.
  2. JSON имеет более удобные методы конвертации в структуры данных JavaScript, чем XML.
  3. JSON более просто создавать, чем XML.
Формат JSON против XML

Работа с данными JSON после парсинга

Работа с данными JSON после парсинга осуществляется как с объектом JavaScript.

//JSON
var personData = '{"name":"Иван","age":37,"mother":{"name":"Ольга","age":58},"children":["Маша","Игорь","Таня"],"married": true,"dog": null}';
//Объект JavaScript person
var person = JSON.parse(personData);

Рассмотрим основные моменты:

//получить значения ключа (свойства) name
person.name;
person["name"];
//получить значения ключа (свойства) name, находящегося в объекте mother
person.mother.name;
//удалить элемент age
delete(person.age)
//добавить (или обновить) ключ (свойство)
person.eye = "карие";
//при работе с массивами необходимо использовать методы, предназначенные для работы именно с массивами
//удалить 1 элементиз массива (метод splice)
person.children.splice(1,1)
//добавить элемент в массив (метод push)
person.children.push("Катя");
Работа с данными JSON после парсинга

Для перебора элементов в объекте можно использовать цикл for..in:

for (key in person) {
  if (person.hasOwnProperty(key)) {
    //ключ = key
    //значение = person[key]
    console.log("Ключ = " + key);
    console.log("Значение = " + person[key]);
  } // если объект person имеет key (если у person есть свойство key)
} // перерабрать все ключи (свойства) в объекте
JavaScript - Перебор элементов в объекте

Для перебора элементов массива можно использовать следующий цикл:

for (var i=0; i<=person.children.length-1; i++) {
 // if (person.children[i].hasOwnProperty(key)) {
    //i = индекс
    //значение = person.children[i]
    console.log("Элемент [ "+ i +" ] = " + person.children[i]);
 // }
JavaScript - Перебор элементов массива

Комментарии:

  1. Игорь
    Игорь
    17.01.2021, 15:53
    Доброго, API присылает данные в массиве. Добраться до ключей получилось. Но в одном свойстве выводит строку с вложенной группой. Как её разобрать ума не приложу. Подскажите пожалуйста в какую сторону копать чтобы вывести ее на страницу в js/jq:
    "{
      \"attributegroup\": \"Body\"
    }{
      \"displaytitle\": \"Body type\",
      \"displayvalue\": \"купе\",
      \"attributetype\": \"BodyType\"
    },
    ...
    "
    1. Александр Мальцев
      Александр Мальцев
      18.01.2021, 14:52
      Привет! Лучше, конечно, доработать API, чтобы он выдавал это в определённом формате, например в JSON. Но если такой возможности нет, то полученную строку (сохранённую, например в str) нужно как-то преобразовать.
      Например, можно заменить символы «}{» на «,» или на что-то другое:
      str = str.replaceAll('}{', ',');
      1. Игорь
        Игорь
        18.01.2021, 15:16
        Да, в итоге я и сделал что то подобное, думал, может более изящное решение есть, спасибо
        var arr = JSON.parse('{"attr": ['+this.attributes.split("}{")+']}');
        ///доступ к элементам такой
        <span>'+arr.attr[2].displayvalue+'</span>
        
    2. Maxima
      Maxima
      21.10.2020, 01:47
      Здравствуйте. Я навичок в JS, очень нужна помощь.
      Есть API вида:
      {"items":[{"updatedAt":"2020-10-15T15:43:31.722287+03:00","communication":{"sewerageSupply":"central","gasSupply":"mains","powerSupply":25,"waterSupply":"central"},"location":{"latitude":"55.742889404296875","districtId":1012,"localityId":1030,"settlementName":"Жуковка-4","settlementId":524...
      Это карточки товаров и мне нужно вывести их на экран. Подключаю API при помощи fetch, вижу данные в консоли, а вывести в полноценном виде в браузер не получается.
      Спасибо.
      1. Александр Мальцев
        Александр Мальцев
        21.10.2020, 13:58
        Здравствуйте!
        Вам нужно создать HTML шаблон карточки, а затем используя его сформировать результирующий HTML фрагмент проходя в цикле через полученные данные при помощи fetch. Ну и после этого вставить его на страницу в нужное место.
        1. Maxima
          Maxima
          21.10.2020, 14:02
          Большое спасибо
      2. blurryfacebeat
        blurryfacebeat
        16.10.2020, 16:15
        Здравствуйте! Каким образом можно дать пользователю загрузить JSON файл через input type=«file» и распарсить его через js?
        1. Александр Мальцев
          Александр Мальцев
          18.10.2020, 11:52
          Здравствуйте!
          Загрузить JSON файл и распарсить его на клиенте можно, например, так (результат выводится в консоль):
          <input type="file" accept=".json" id="upload">
          
          <script>
          const upload = document.querySelector('#upload');
          upload.addEventListener('change', function (e) {
            try {
              const upload = e.target.files[0];
              const reader = new FileReader();
              reader.addEventListener('load', (function (file) {
                return function (e) {
                  json = JSON.parse(e.target.result);
                  // выводим результат в консоль
                  console.log(json);
                }
              })(upload));
              reader.readAsText(upload);
            }
            catch (ex) {
              console.log(ex);
            }
          });
          </script>
          
          1. blurryfacebeat
            blurryfacebeat
            18.10.2020, 15:29
            Здравствуйте! Большое спасибо, очень выручили!
        2. Никита
          Никита
          26.09.2020, 17:21
          Добрый день. Подскажите, каким образом мне получить данные в должном виде с сайта, что бы я смог их выводить на своей странице либо как мне вывести на страницу все содержимое моего файла?

          Вот так я их забираю и сохраняю.
          const fs = require('fs');
              let savedData = [];
              osmosis
              .get('http://www.cafebaluk.by/Orders/GetWeekDishes')
              .set({'Неделя': 'body'}) 
                 .log(console.log)
                 .data(function(data) {
                    console.log(data);
                    savedData.push(data);
                 })
                 .done(function() {
                    fs.writeFile('dishes.json', JSON.stringify( savedData, null, 4), function(err) {
                      if(err) console.error(err);
                      else console.log('dishes.json');
                    })
                  });
          
          Вот так выглядит мой файл json после сохранения.
          [{ "Неделя": "{\"Success\":true,\"WeekDishes\":[{\"DayName\":\"Понедельник 28 сентября\",\"ShortDayName\":\"ПН 28 сен\",\"DayId\":0,\"Dishes\":[{\"Category\":{\"CategoryId\":1,\"Name\":\"Салаты\",\"SortOrder\":0,\"CategoryImage........
          

          Вот так я их с файла забираю и пытаюсь выводить на страницу (как пример)
          oAJAX = new XMLHttpRequest();
          oAJAX.open("GET","dishes.json", true);
          oAJAX.onreadystatechange = function () {
              var oOutput = document.getElementById("output");
              if ((oAJAX.readyState == 4) && (oAJAX.status == 200)) {
                  var oData = JSON.parse(oAJAX.responseText);
                  {
                      var oP;
                      for (i in oData.WeekDishes) {
                      oP = document.createElement ("p");
                      oP.textContent = oData.WeekDishes[i].DayName + "   " + oData.WeekDishes[i].ShortDayName; 
                      oOutput.appendChild(oP);
                      }
                } 
              }
          }
          oAJAX.send();
          
          Но отображаются они у меня только тогда, если я через валидатор прогоняю свои данные в нормально виде (как пример)
          "Success":true,
          "WeekDishes":[
          {
          "DayName":"Понедельник 28 сентября",
          "ShortDayName":"ПН 28 сен",
          "DayId":0,
          "Dishes":[
          {
          
          Буду благодарен за отклик!
          1. Александр Мальцев
            Александр Мальцев
            27.09.2020, 03:15
            Здравствуйте! Если «cafebaluk.by» ваш ресурс или вы можете настроить на нём cors для вашего ресурса, то можете обращаться из JavaScript к данным напрямую:
            oAJAX = new XMLHttpRequest();
            oAJAX.open('GET', 'http://www.cafebaluk.by/Orders/GetWeekDishes', true);
            ...
            
            Если у вас нет доступа к этим данным напрямую со страницы, то в этом случае их нужно получить на сервере. При этом их не нужно заключать в 'Неделя', запишите их в файл как есть. В этом случае ваш JavaScript код будет работать.
            1. Никита
              Никита
              27.09.2020, 11:27
              Благодарю за обратную связь!
          2. Андрей
            Андрей
            23.09.2020, 17:35
            Здравствуйте, Александр!
            Я мало знаком с технологией JSON, поэтому прошу дать рекомендацию.
            На телефона (android) есть игра, в папке с файлами этой игры есть скрипты с расширениями json. Их можно править и сохранять. Изменения появляются в игрушке. Например, какая-то штучка в игре стоит 100 золотых, я нахожу соответствующий скрипт, 100 правлю на 1, и эта штука в игре уже стоит 1 золотой.
            Вопрос мой заключается вот в чём: могут ли мои манипуляции отследить создали игрушки, ну и, как результат, применить ко мне санкции? Я, как писал выше, не очень понимаю как происходит обмен с сервером, ведь файлы игры лежат у меня устройстве.
            1. Александр Мальцев
              Александр Мальцев
              26.09.2020, 14:53
              Здравствуйте! При запуске игры, она читает этот файл и, конечно, если в коде такое прописано, то эти данные могут быть отправлены на сервер. Но отправляются они или нет, знают только её разработчики.
            2. rusta
              rusta
              19.06.2020, 12:42
              добрый день! подскажите пожалуйста как в JS из следующей базы данных JSON вытащить значение «date», например если нужно прочитать/вытащить дату «2019/06/28»

              {"DCBHhfhDSYY":{"fhdfjksdf123":{"autoID":"fhdfjksdf123","email1":"xxxx@mail.ru","date":"2019/04/05"},"sdfhrfkuhkf76":{"autoID":"sdfhrfkuhkf76","email1":"dddd@mail.ru","date":"2019/06/28"},...}},{"QUEUDHKSNss":{"fhdfjksdf123":{"autoID":"fhdfjksdf123","email1":"cccc@mail.ru","date":"2019/03/14"},"sdfhrfkuhkf76":{"autoID":"sdfhrfkuhkf76","email1":"aaaa@mail.ru","date":"2019/09/25"},...}},...}
              
              я новичок JS, буду благодарен за любой совет
              1. Александр Мальцев
                Александр Мальцев
                21.06.2020, 03:34
                Здравствуйте! Вам необходимо преобразовать JSON в JavaScript объект, используя метод «JSON.parse». Далее с помощью цикла перебрать его и получить необходимые данные.
                1. ALex666
                  ALex666
                  28.08.2020, 17:45
                  /* fetch('https://jsonplaceholder.typicode.com/comments')
                  .then(response => response.json())
                  .then(comments=> console.log(comments)); */

                  /* В коде console.log(comments) печатает массив comment-с։
                  Каждый comment из себя представляет обьект несколькими propertу։ */

                  1) Получить массив, где будут только те comments, у которых, сума(+) postId и id property
                  будут четные цифры:

                  2) Нам нужно проверить, все ли comment's body property lengths больше 5. Т.е. мы должны иметь одну переменную, которая будет true или false. Если ВСЕ bodies length > 5, то переменная будет true, если хоть одна bodies length < 5, то переменная будет false.

                  3) Получить новый массив, где будут только email properties. Т.е. должны получить массив где string-ы.

                  4) Получить 1 object, где keys будут наши postId, а как значение будет массив, где будут bodies ։ Т.е. в конечном итоге должны получить object, который имеет 100 properties (postId-s): Перед каждой property должен быть массив, в котором есть 5 strings (comment.body-s)
                  1. ALex666
                    ALex666
                    27.08.2020, 17:33
                    /* fetch('https://jsonplaceholder.typicode.com/comments')
                    .then(response => response.json())
                    .then(comments=> console.log(comments)); */

                    /* В коде console.log(comments) печатает массив comment-с։
                    Каждый comment из себя представляет обьект несколькими propertу։ */

                    1) Получить массив, где будут только те comments, у которых, сума(+) postId и id property
                    будут четные цифры:

                    2) Нам нужно проверить, все ли comment's body property lengths больше 5. Т.е. мы должны иметь одну переменную, которая будет true или false. Если ВСЕ bodies length > 5, то переменная будет true, если хоть одна bodies length < 5, то переменная будет false.

                    3) Получить новый массив, где будут только email properties. Т.е. должны получить массив где string-ы.

                    4) Получить 1 object, где keys будут наши postId, а как значение будет массив, где будут bodies ։ Т.е. в конечном итоге должны получить object, который имеет 100 properties (postId-s): Перед каждой property должен быть массив, в котором есть 5 strings (comment.body-s)
                    1. ALex666
                      ALex666
                      24.08.2020, 19:47
                      fetch('https://jsonplaceholder.typicode.com/posts')
                      .then(response => response.json())
                      .then(posts=> {
                      console.log(posts);
                      });

                      1) Получить один object, где key будет id post-а, а как value будет title post-а

                      2) Получить новый array, где будут входить только те post, у которых body.length больше 50
                      1. Александр Мальцев
                        Александр Мальцев
                        27.08.2020, 15:35
                        Задачу №1 можно решить так:
                        fetch('https://jsonplaceholder.typicode.com/posts')
                          .then((response) => response.json())
                          .then((posts) => {
                            const result = {};
                            for (let item of posts) {
                              result[item.id] = item.title;
                            }
                            console.log(result);
                          });
                        
                        Задачу №2 так:
                        fetch('https://jsonplaceholder.typicode.com/posts')
                          .then((response) => response.json())
                          .then((posts) => {
                            const result = [];
                            for (let item of posts) {
                              if (item.body.length > 50) {
                                result.push(item);
                              }
                            }
                            console.log(result);
                          });
                        
                      2. ALex666
                        ALex666
                        24.08.2020, 19:39
                        fetch('https://jsonplaceholder.typicode.com/users')
                        .then(response => response.json())
                        .then(users => {
                        console.log(users)
                        })

                        нужно вытащить website properties, которые закончиваются (.com)
                        1. Александр Мальцев
                          Александр Мальцев
                          27.08.2020, 16:01
                          Это можно решить через регулярные выражения:
                          fetch('https://jsonplaceholder.typicode.com/users')
                            .then((response) => response.json())
                            .then((users) => {
                              const result = [];
                              for (let user of users) {
                                if (/.*\.com$/.test(user.website)) {
                                  result.push(user.website);
                                }
                              }
                              console.log(result);
                            });
                          
                    2. Юлия Федотова
                      Юлия Федотова
                      10.06.2020, 17:17
                      Александр, здравствуте! помогите пожалуйста решить задачу, сколько пробовала нереально нагуглить как работать с функцией в обЪекте, если объясните буду очень благодарна

                      Дано:
                      есть объект
                      x = {
                      a: 2345,
                      b: '123456',
                      sum: function() {return this.a + this.b}
                      }

                      Надо:
                      1. Сохранить его в JSON вместе с функцией
                      2. Восстановить объект из JSON.
                      3. После восстановления x.sum() должен вернуть 125801 (т.е. 2345 + 123456) так, как если бы оба параметра числовые.
                      Менять типы параметров объекта нельзя.
                      1. Александр Мальцев
                        Александр Мальцев
                        11.06.2020, 06:23
                        Здравствуйте! Функция не может использоваться в качестве значения ключа JSON. При преобразовании этого объекта в JSON с помощью JSON.stringify ключ sum в нем будет просто отсутствовать.
                      2. Dima
                        Dima
                        30.03.2020, 22:58
                        Итак форум тут живой, автор тоже,
                        вопрос: то ли я… то ли лижи не едут,
                        первое встречное по jS

                        «Например, структура объекта, которая является валидной с точки зрения JavaScript и не валидной с точки зрения JSON:»
                        " var person = { name: «Иван»; } // объект JavaScript"
                        и далее тоже в объектах, внутри перечисление свойств, идет через точку с запятой (; )
                        это только в начале, а дальше все идет нормально, но… автор проверь внимательно
                        и покажи разницу эту валидности, что в JS норма, и JSON нет
                        1. Александр Мальцев
                          Александр Мальцев
                          01.04.2020, 15:24
                          Спасибо, поправил эти моменты в статье.
                        2. Olesia
                          Olesia
                          28.02.2020, 11:19
                          Добрый день!

                          Огромное спасибо за подробное объяснение! :-)

                          Вы не могли бы, пожалуйста, на примере объяснить, где в JSON:
                          1. параметр
                          2. значение параметра
                          3. список
                          4. объект

                          Спасибо! :-)
                          1. Александр Мальцев
                            Александр Мальцев
                            28.02.2020, 15:29
                            Здравствуйте!
                            Например, пусть имеется следующая JSON строка:
                            <script>
                            // JSON строка
                            var jsonString = '{"parameterA":"value of parameterA","parameterB":{"parameterB1":"value of parameterB1","parameterB2":"value of parameterB2"},"parameterC":["value of parameterC1","value of parameterC2","value of parameterC3"]}';
                            </script>
                            
                            В этом примере она состоит из 3 свойств (параметров): parameterA, parameterB и parameterC.
                            Значением первого свойства (параметра) является строка: «value of parameterA». Значением второго свойства: объект, состоящий из 2 свойств ({«parameterB1»:«value of parameterB1»,«parameterB2»:«value of parameterB2»}). Значение 3 параметра массив (список): «value of parameterC1»,«value of parameterC2»,«value of parameterC3».
                          2. Владислав Коперников
                            Владислав Коперников
                            09.01.2020, 01:14
                            Здравствуйте. Нужен небольшой хелп. Новичок в js. Есть такие задачи: 1)реализовать загрузку пользователей с апи2) отображения списка месяцев 3) подсветить месяца в зависимости от количества людей, которые родились в этом месяце. 4) при наведении на выбранный месяц — отобразить список людей, родившихся в этом месяце. К сожалению, я застрял после импорта пользователей из API. Извините за банальный вопрос:- Каким методом распределить пользователей в блоки (месяцы рождения)? большое спасибо
                            function App() {
                              const [users, setUser] = useState(null);
                            
                              const fetchData = async () => {
                                const response = await axios.get(
                                  'https:...api/users'
                                );
                            
                                setUser(response.data);
                              };
                            
                              return (
                                <div className="App">
                                  <h1>Users list</h1>
                            
                            
                                  {/* Fetch data from API */}
                                  <div>
                                    <button className="fetch-button" onClick={fetchData}>
                                      download users
                                    </button>
                                    <br />
                                  </div>
                            
                                  {/* Display data from API */}
                                  <div className="users">
                                    {users &&
                                      users.map((user, index) => {
                                        const cleanedDate = new Date(user.released).toDateString();
                                        const name = user.firstName;
                            
                                        return (
                                          <div className="user" key={index}>
                                            <h3>user {index + 1}</h3>
                                            <h2>{user.name}</h2>
                            
                                            <div className="details">
                                              <p>
                            
                            1. dmytro0000a
                              dmytro0000a
                              21.12.2019, 09:00
                              Добрый день! Спасибо за ваш пост.

                              Подскажите пожайлуста можно сделать так, чтобы переходя по ссылке site.com/link — отображался сайт в формате PHP, но если перейти site.com/link/?ajax=1 — отображался с формате JSON? Спасибо.
                              1. Александр Мальцев
                                Александр Мальцев
                                21.12.2019, 13:33
                                Привет! Пожалуйста.

                                Это решается на стороне сервера.
                                Для этого нужно получить GET-параметр AJAX, если он, конечно, существует. Затем если этот параметр равен 1, то вывести JSON, в противном случае HTML страницу.

                                Вот пример php-файла как это можно выполнить:
                                <?php
                                
                                $ajax = 0;
                                if (isset($_GET['ajax'])) {
                                  $ajax = (int)$_GET['ajax'];
                                }
                                
                                $data = [ 
                                  'pagetitle' => 'Заголовок страницы',
                                  'description' => 'Описание страницы...',
                                  'content' => 'Ссдержимое статьи...',
                                ];
                                
                                if ($ajax == 1) {
                                  header('Content-Type: application/json');
                                  echo json_encode($data);
                                  exit();
                                }
                                
                                echo <<<HTML
                                <!doctype html>
                                <html lang="ru">
                                  <head>
                                    <meta charset="utf-8">
                                    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                                    <meta name="description" content="{$data['description']}">    
                                    <title>{$data['pagetitle']}</title>
                                  </head>
                                  <body>
                                    <h1>{$data['pagetitle']}</h1>
                                    <div class="container">
                                      {$data['pagetitle']}
                                    </div>
                                  </body>
                                </html>
                                HTML;
                                
                                exit();
                                
                                1. dmytro0000a
                                  dmytro0000a
                                  27.12.2019, 22:42
                                  Доброй ночи! Подскажите пожайлуста, как можно сделать чтобы данные html страницы отображались в ормате json, по запросу — site.com/link/?ajax, site.com/link/?ajax=1, site.com/link — отображался сайт в формате PHP?
                                  1. Александр Мальцев
                                    Александр Мальцев
                                    29.12.2019, 13:51
                                    Привет!
                                    В этом случае достаточно просто проверить наличие GET-параметра ajax:
                                    <?php
                                    
                                    $ajax = false;
                                    if (isset($_GET['ajax'])) {
                                      $ajax = true;
                                    }
                                    
                                    $data = [ 
                                      'pagetitle' => 'Заголовок страницы',
                                      'description' => 'Описание страницы...',
                                      'content' => 'Ссдержимое статьи...',
                                    ];
                                    
                                    if ($ajax) {
                                      header('Content-Type: application/json');
                                      echo json_encode($data);
                                      exit();
                                    }
                                    
                                    echo <<<HTML
                                    ...
                                    
                                  2. dmytro0000a
                                    dmytro0000a
                                    21.12.2019, 15:43
                                    Спасибо вам большое!!!
                                2. Aleksandr Ustinov
                                  Aleksandr Ustinov
                                  18.11.2019, 09:14
                                  Шеф прошу помощи, данный код:
                                  $request = array(	'
                                  hone' => $tf, //телефон
                                  	'question' => $quest, //вопрос
                                  	'domain' => $domain, // домен
                                      'location' => '00',
                                  	'url' => $url
                                  );
                                   
                                  // Указание опций для контекста потока
                                  $options = array (
                                      'http' => array (
                                          'method' => 'POST',
                                          'header' => "Content-Type: application/json; charset=utf-8\r\n",
                                          'content' => json_encode($request)
                                      )
                                  );
                                  
                                  // Создание контекста потока
                                  $context = stream_context_create($options);
                                  // Отправка данных и получение результата
                                  echo file_get_contents('http://crm.yucc24.ru/api/json1.html?token=1572167606', 0, $context);
                                  Выдает в консоли ошибку:
                                  SyntaxError: JSON.parse: expected ':' after property name in object at line 1 column 14 of the JSON data
                                  все проверил, не могу понять что не так
                                  1. Александр Мальцев
                                    Александр Мальцев
                                    18.11.2019, 14:57
                                    Текст ошибки же выдаётся. Посмотрите какой возвращается ответ, а также проанализируйте почему он не может быть преобразован в JSON.
                                    1. Aleksandr Ustinov
                                      Aleksandr Ustinov
                                      18.11.2019, 17:32
                                      код исполняется так как нужно, единственное после нажатия отправить, не появляется благодарственная страница, форма как бы зависает
                                      1. Александр Мальцев
                                        Александр Мальцев
                                        19.11.2019, 15:36
                                        Ошибка у вас возникает при парсинге JSON ответа с помощью JSON.parse.
                                  2. Mavio Candiz
                                    Mavio Candiz
                                    25.02.2016, 19:47
                                    Здравствуйте!
                                    По поводу метода JSON.stringify() мне не совсем понятно, откуда он взялся. Я просмотрел всю библиотеку jQuery, jquery.min, которые содержат JSON, но нашёл только JSON.parse(). Подскажите, пожалуйста, где ещё есть json, чтобы мне знать, какую библиотеку нужно подключать для полноценной работы объекта JSON.
                                    1. Александр Мальцев
                                      Александр Мальцев
                                      26.02.2016, 12:53
                                      Здравствуйте.
                                      В этой статье приведены только нативные методы JavaScript. Для работы с ними никакие библиотеки подключать не надо, в том числе и jQuery.
                                      1. Mavio Candiz
                                        Mavio Candiz
                                        27.02.2016, 00:13
                                        Благодарю! Значит JSON — это встроенное средство языка JavaScript.
                                        Для меня, как изучающего JavaScript и пробующего писать на нём интересные программы, это очень ценная информация.
                                    Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.