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

Содержание:
  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 объекта. В объекте ключ (имя свойства) не обязательно следует заключать в двойные кавычки.

Например:

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
// объект 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 строки, состоящей из различных типов данных:

JavaScript
{
  "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 – это строка.

JavaScript
// переменная 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:

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

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

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

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

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

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

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

JavaScript
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.

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

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

JavaScript
//получить значения ключа (свойства) 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:

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

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

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 - Перебор элементов массива

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

kotbasikcom
kotbasikcom

Здесь фрагмент кода

Здравствуйте. Подскажите, пожалуйста, как можно вывести (показать) все файлы к событию?

Выводятся только по одному файлу к событию.(в консоли результат)

Александр Мальцев
Александр Мальцев

Привет! Так console.log() нужно просто поместить внутрь цикла:

for (let i = 0; i < picIndEv1.length; i += 1) {
  picpic =ged[it][picIndEv1[i]]["FILE.0"];
  console.log(picpic);
}
kotbasikcom
kotbasikcom

Спасибо. Я не программер. Это мои "танки" на пенсии, чтобы мозги не высохли совсем. Нацарапал через forEach.

Так
kotbasikcom
kotbasikcom

Нашел:

console.log("Ключ первого объекта "кот" в массиве kat: "+Object.keys(kat).find(key => kat[key] === 'кот'));
console.log("Ключи всех объектов "кот" в массиве kat: "+Object.keys(kat).filter(key => kat[key] === 'кот'));
kotbasikcom
kotbasikcom

Здравствуйте.

Структура примерно такая:
var kat  = '{'1':'кот', '2':'кошка', '3':'кот',' 4':'кот', '5':'кошка'}';
console.log("Все ключи объектов в массиве kat: "+ Object.keys(kat));

Как получить ключи всех "кот" и возможно ли это?

Vyacheslav
Vyacheslav

Здравствуйте, передо мной стоит задача создать справочник, используя javascript. Для этой задачи я создал сайт с 8 объектами, в которых есть кнопка, и создал json файл, который должен содержать в себе картинку, название объекта и его описание. Я не могу сообразить, т.к. в JS я полный ноль, как мне при клике на кнопку в html объекте, переходить на другую, заранее созданную html страницу, и вносить соответствующие этому объекту данные из json файла в соответствующие html элементы(картинку в блок 'img', описание в элемент 'p' и т.д.). Я бы мог создать много html страниц с готовым форматом для каждого объекта, и ссылаться на них из родительской страницы, но это случится только тогда, когда я отчаюсь полностью. Спасибо.

Александр Мальцев
Александр Мальцев

Добрый день!

Передать данные на другую страницу можно, например, с помощью GET-параметра:
<a href="02.html?id=1">Page 1</a>
<a href="02.html?id=2">Page 2</a>
Здесь при клике на любую ссылку откроется страница "02.html". Но первая будет передавать параметр id со значением 1, а вторая id со значением 2. Далее на второй странице мы можем получить этот GET-параметр и в зависимости от его значения получить соответствующие данные из JSON:
<p id="p"></p>
<img src="#" id="img" alt="">

<script>
  (async () => {
    const searchPrams = new URLSearchParams(location.search);
    const id = searchPrams.get('id');
    let response = await fetch('data.json');
    if (response.ok) {
      // получаем ответ в формате JSON и сохраняем его в data
      let data = await response.json();
      document.querySelector('#p').innerHTML = data[id]['p'];
      document.querySelector('#img').src = data[id]['img'];
    }
  })();
</script>
Ну и сам JSON-файл:
{
  "1": {
    "p": "Текст 1...",
    "img": "1.png"
  },
  "2": {
    "p": "Текст 2...",
    "img": "2.png"
  }
}
Vyacheslav
Vyacheslav

Большое спасибо, очень выручили

Игорь
Игорь
Здравствуйте. Пробую создать файловый менеджер. Нужна помощь в формировании json массива вида:
[
  {
    name: 'public',
    path: 'public',
    children: [
      {
        name: 'static',
        path: 'public/static',
      },
      ...
   }
]
Сделал рекурсию, выводит только названия папок:
function getDirTree($path){
  $result = [];
  $files = scandir($path);
  foreach ($files as $file) {
    if(! in_array($file, ['.','..'])) {
      if(is_dir($path . DIRECTORY_SEPARATOR . $file)) {
        $result[$file] = getDirTree($path . DIRECTORY_SEPARATOR . $file);
      }
    }
  }
  return $result;
}
Отдаю так:
$dir = 'files';
$data = getDirTree($dir);
echo json_encode(array($data));
Помогите пожалуйста разобраться в написании функции для формирования нужного формата ответа с именем, путем и потомком. Спасибо.
Игорь
Игорь
<?php

function getDirContents($dir, &$results = array())
{
  $files = scandir($dir);
  foreach ($files as $value) {
    $path = realpath($dir . DIRECTORY_SEPARATOR . $value);
    if (!is_dir($path)) {
      $results[] = array('name' => $value, 'path' => $path);
    } else if ($value != '.' && $value != '..') {
      $results[] = array('name' => $value, 'path' => $path, 'children' => array());
      getDirContents($path, $results[count($results) - 1]['children']);
    }
  }
  return $results;
}
Александр Мальцев
Александр Мальцев
Здравствуйте. Рад что все получилось.
iteru
iteru
Добрый день! Помогите решить следующую задачу:
Есть файл в формате json из него нужно удалить строки содержащие определенное слово, а оставшиеся строки записать в новый файл json. Как это проще всего сделать?
Александр Мальцев
Александр Мальцев
Здравствуйте! JSON это просто текст, если у вас получится его обработать с помощью регулярок или текстовых функций, то тогда можно не преобразовывать в объект. Иначе преобразовывайте текст в объект и перебирайте его.
Lika
Lika
Здравствуйте! Помогите, пожалуйста, поправить код по тз:
1. Опиши несколько очередей для разбора обращений. Должно получится три группы сотрудников по темам: еда, рассадка, другое. Каждая группа должна иметь доступ только ко своей очереди.
2. Добавь ссылки на все социальные сети (любые ссылки).
3. Добавь несколько кнопок: перевода, открытия и закрытия тикета.

Пример 1:
«support_line_1»: {
«criterions»: {
«fields/test_routing»: {
"#in": [
«support_line_1»
]
},
«sort»: {
"#in": [
«email»
]
}
},
«fields»: {
},
«name»: «Support Line 1»,
«permissions»: [
],
«precedence»: 1,
«profile»: «support-test»,
«sort_order»: 1,
«tags»: [
],
«target»: «supbox»,
«title_tanker»: «lines.support_line_1»,
«sorts»: [
«email»
]
},

Пример 2:
«support_line_3»: {
«search»: [
{
«permissions»: [
«supbox_support_test_3»
]
}
],
«decide»: [
{
«permissions»: [
«supbox_support_test_3»

Пример 3:
{
«action_id»: «close»,
«queues»: [
«support_line_1»,
«support_line_2»,
«support_line_3»
],
«query_params»: {
«kurilka_button»: «close_button»
},
«title»: «close»
},

Пример 4:
{
«ticket_sort»: [
«email»
],
«criterions»: {
«queue»: {
"#in": [
«support_line_1»,
«support_line_2»,
«support_line_3»
]
}
},
«iframe_url»: «vk.com/im»,
«site»: «vk.com/im»,
«name»: «Личка в ВК»
},

Пример 5:
{
«queues»: [
«support_line_1»,
«support_line_2»,
«support_line_3»
],
«output_sort»: «test»,
«project_id»: «137»,
«sort»: «email»
},
Игорь
Игорь
Доброго, API присылает данные в массиве. Добраться до ключей получилось. Но в одном свойстве выводит строку с вложенной группой. Как её разобрать ума не приложу. Подскажите пожалуйста в какую сторону копать чтобы вывести ее на страницу в js/jq:
"{
  \"attributegroup\": \"Body\"
}{
  \"displaytitle\": \"Body type\",
  \"displayvalue\": \"купе\",
  \"attributetype\": \"BodyType\"
},
...
"
Александр Мальцев
Александр Мальцев
Привет! Лучше, конечно, доработать API, чтобы он выдавал это в определённом формате, например в JSON. Но если такой возможности нет, то полученную строку (сохранённую, например в str) нужно как-то преобразовать.
Например, можно заменить символы «}{» на «,» или на что-то другое:
str = str.replaceAll('}{', ',');
Игорь
Игорь
Да, в итоге я и сделал что то подобное, думал, может более изящное решение есть, спасибо
var arr = JSON.parse('{"attr": ['+this.attributes.split("}{")+']}');
///доступ к элементам такой
<span>'+arr.attr[2].displayvalue+'</span>
Maxima
Maxima
Здравствуйте. Я навичок в 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, вижу данные в консоли, а вывести в полноценном виде в браузер не получается.
Спасибо.
Александр Мальцев
Александр Мальцев
Здравствуйте!
Вам нужно создать HTML шаблон карточки, а затем используя его сформировать результирующий HTML фрагмент проходя в цикле через полученные данные при помощи fetch. Ну и после этого вставить его на страницу в нужное место.
Maxima
Maxima
Большое спасибо
blurryfacebeat
blurryfacebeat
Здравствуйте! Каким образом можно дать пользователю загрузить JSON файл через input type=«file» и распарсить его через js?
Александр Мальцев
Александр Мальцев
Здравствуйте!
Загрузить 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>
blurryfacebeat
blurryfacebeat
Здравствуйте! Большое спасибо, очень выручили!
Никита
Никита
Добрый день. Подскажите, каким образом мне получить данные в должном виде с сайта, что бы я смог их выводить на своей странице либо как мне вывести на страницу все содержимое моего файла?

Вот так я их забираю и сохраняю.
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":[
{
Буду благодарен за отклик!
Александр Мальцев
Александр Мальцев
Здравствуйте! Если «cafebaluk.by» ваш ресурс или вы можете настроить на нём cors для вашего ресурса, то можете обращаться из JavaScript к данным напрямую:
oAJAX = new XMLHttpRequest();
oAJAX.open('GET', 'http://www.cafebaluk.by/Orders/GetWeekDishes', true);
...
Если у вас нет доступа к этим данным напрямую со страницы, то в этом случае их нужно получить на сервере. При этом их не нужно заключать в 'Неделя', запишите их в файл как есть. В этом случае ваш JavaScript код будет работать.
Никита
Никита
Благодарю за обратную связь!
Андрей
Андрей
Здравствуйте, Александр!
Я мало знаком с технологией JSON, поэтому прошу дать рекомендацию.
На телефона (android) есть игра, в папке с файлами этой игры есть скрипты с расширениями json. Их можно править и сохранять. Изменения появляются в игрушке. Например, какая-то штучка в игре стоит 100 золотых, я нахожу соответствующий скрипт, 100 правлю на 1, и эта штука в игре уже стоит 1 золотой.
Вопрос мой заключается вот в чём: могут ли мои манипуляции отследить создали игрушки, ну и, как результат, применить ко мне санкции? Я, как писал выше, не очень понимаю как происходит обмен с сервером, ведь файлы игры лежат у меня устройстве.
Александр Мальцев
Александр Мальцев
Здравствуйте! При запуске игры, она читает этот файл и, конечно, если в коде такое прописано, то эти данные могут быть отправлены на сервер. Но отправляются они или нет, знают только её разработчики.
rusta
rusta
добрый день! подскажите пожалуйста как в 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, буду благодарен за любой совет
Александр Мальцев
Александр Мальцев
Здравствуйте! Вам необходимо преобразовать JSON в JavaScript объект, используя метод «JSON.parse». Далее с помощью цикла перебрать его и получить необходимые данные.
ALex666
ALex666
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(users => {
console.log(users)
})

нужно вытащить website properties, которые закончиваются (.com)
ALex666
ALex666
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 можно решить так:
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);
  });
Александр Мальцев
Александр Мальцев
Это можно решить через регулярные выражения:
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);
  });
ALex666
ALex666
/* 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)
ALex666
ALex666
/* 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)
Юлия Федотова
Юлия Федотова
Александр, здравствуте! помогите пожалуйста решить задачу, сколько пробовала нереально нагуглить как работать с функцией в обЪекте, если объясните буду очень благодарна

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

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

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

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

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

Спасибо! :-)
Александр Мальцев
Александр Мальцев
Здравствуйте!
Например, пусть имеется следующая 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».
Владислав Коперников
Владислав Коперников
Здравствуйте. Нужен небольшой хелп. Новичок в 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>
dmytro0000a
dmytro0000a
Добрый день! Спасибо за ваш пост.

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

Это решается на стороне сервера.
Для этого нужно получить 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();
dmytro0000a
dmytro0000a
Спасибо вам большое!!!
dmytro0000a
dmytro0000a
Доброй ночи! Подскажите пожайлуста, как можно сделать чтобы данные html страницы отображались в ормате json, по запросу — site.com/link/?ajax, site.com/link/?ajax=1, site.com/link — отображался сайт в формате PHP?
Александр Мальцев
Александр Мальцев
Привет!
В этом случае достаточно просто проверить наличие 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
...
Aleksandr Ustinov
Aleksandr Ustinov
Шеф прошу помощи, данный код:
$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
все проверил, не могу понять что не так
Александр Мальцев
Александр Мальцев
Текст ошибки же выдаётся. Посмотрите какой возвращается ответ, а также проанализируйте почему он не может быть преобразован в JSON.
Aleksandr Ustinov
Aleksandr Ustinov
код исполняется так как нужно, единственное после нажатия отправить, не появляется благодарственная страница, форма как бы зависает
Александр Мальцев
Александр Мальцев
Ошибка у вас возникает при парсинге JSON ответа с помощью JSON.parse.
Аноним
Аноним
Здравствуйте!
По поводу метода JSON.stringify() мне не совсем понятно, откуда он взялся. Я просмотрел всю библиотеку jQuery, jquery.min, которые содержат JSON, но нашёл только JSON.parse(). Подскажите, пожалуйста, где ещё есть json, чтобы мне знать, какую библиотеку нужно подключать для полноценной работы объекта JSON.
Александр Мальцев
Александр Мальцев
Здравствуйте.
В этой статье приведены только нативные методы JavaScript. Для работы с ними никакие библиотеки подключать не надо, в том числе и jQuery.
Аноним
Аноним
Благодарю! Значит JSON — это встроенное средство языка JavaScript.
Для меня, как изучающего JavaScript и пробующего писать на нём интересные программы, это очень ценная информация.