JSON | Руководство по JSON - JavaScript Object Notation (Нотация объектов JavaScript)

Links

Введение в JSON

Руководство по JSON - webref.ru

Оригинал: quackit.com/json/tutorial

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

Вот несколько кратких сведений о JSON.

• JSON популярен и, возможно, самый широко используемый формат для обмена данными по сети. Вероятно он превзошёл в этом XML (который применяется в AJAX) как наиболее распространённый формат, используемый для асинхронной связи между браузером и сервером.
• JSON одновременно человекочитаемый и машиночитаемый формат. Другими словами, JSON-документ структурирован так, что его можно легко прочитать с помощью компьютерной программы, при этом человек может быстро просканировать JSON-файл и понять данные, которые в нём содержатся.
• JSON основан на подмножестве JavaScript и был вдохновлён объектными литералами JavaScript (также известным как ECMAScript). Несмотря на это, JSON не зависит от языка. Это облегчает обмен данными между множеством языков программирования. Фактически, JSON использует общие соглашения о программировании, что делает его знакомым большинству программистов, независимо от выбранного ими языка.

Как выглядит JSON?

Вот базовый пример JSON-документа.

{
  "artists" : [
    {
      "artistname" : "Deep Purple",
      "albums" : [
        {
          "albumname" : "Machine Head",
          "year" : "1972",
          "genre" : "Рок"
        },
        {
          "albumname" : "Stormbringer",
          "year" : "1974",
          "genre" : "Рок"
        }
      ]
    }
  ]
}

Здесь представлен набор того, что и в большинстве JSON-документов (хотя они могут хранить гораздо больше данных). JSON-документ содержит текст, фигурные и квадратные скобки, двоеточия, запятые, двойные кавычки и, может быть, некоторые другие символы.

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

Хорошей новостью является то, что мой маленький пример охватывает практически весь синтаксис JSON. Больше показать нечего, только объяснить как работает синтаксис.

Синтаксис JSON

JSON хранит данные в объектах и массивах. Синтаксис JSON отражает как они определяются.

Объекты JSON

Объект JSON — это неупорядоченный набор пар имя/значение, вставленных между фигурных скобок { }.

В следующем примере artistname — это имя, а Deep Purple — его значение.

{ "artistname" : "Deep Purple" }

Объект может содержать ноль или больше пар имя/значение. Несколько пар разделяются запятыми. Вот корректные объекты.

{ }

{ "artistname" : "Deep Purple" }

{ 
  "artistname" : "Deep Purple", 
  "formed" : "1968" 
}

{
  "artistname" : "Deep Purple", 
  "formed" : "1968",
  "origin" : "Хертфорд, Великобритания"
}

В JSON имя — это строка. Его значением может быть объект, массив, число, строка, true, false или null.

В приведённых выше примерах значения являются строками.

Массивы JSON

Массив JSON — это упорядоченный набор значений, который позволяет хранить список значений. Массив начинается с левой квадратной скобки [ и завершается правой квадратной скобкой ]. Его значения разделяются запятой.

Вот пример массива исполнителей.

{
  "artists" : [
    { 
      "artistname" : "Deep Purple",
      "formed" : "1968"
    },
    { 
      "artistname" : "Joe Satriani",
      "born" : "1956" 
    },
    { 
      "artistname" : "Maroon 5",
      "formed" : "1994" 
    }
  ]
}

Пробелы

Вы можете использовать пробелы, чтобы сделать ваши JSON-документы более читабельными. Фактически это согласуется с большинством (если не всеми) языками программирования.

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

{
  "artists" : [
    { "artistname" : "Deep Purple", "formed" : "1968" },
    { "artistname" : "Joe Satriani", "born" : "1956" },
    { "artistname" : "Maroon 5", "formed" : "1994" }
  ]
}

Или так.

{
  "artists" : [
    { 
      "artistname" : "Deep Purple",
      "formed" : "1968"
    },
    { 
      "artistname" : "Joe Satriani",
      "born" : "1956" 
    },
    { 
      "artistname" : "Maroon 5",
      "formed" : "1994" 
    }
  ]
}

Эти два примера содержат одни и те же данные и простое добавление пробелов на данные никак не влияет.

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

Вложенные данные

Большинство JSON-файлов хранят много вложенных данных, что обусловлено их структурой. К примеру, у нас может быть массив исполнителей, его имя — artists, а значение — массив, содержащий сведения о разных исполнителях. У каждого исполнителя может быть свой массив альбомов, каждый с разной парой имя/значение.

{
  "artists" : [
    {
      "artistname" : "Deep Purple",
      "formed" : "1968",
      "albums" : [
        {
          "albumname" : "Machine Head",
          "year" : "1972",
          "genre" : "Рок"
        },
        {
          "albumname" : "Stormbringer",
          "year" : "1974",
          "genre" : "Рок"
        }
      ]
    }
  ]
}

Чтобы расширить данный пример возьмём трёх исполнителей.

{
  "artists" : [
    {
      "artistname" : "Deep Purple",
      "formed" : "1968",
      "albums" : [
        {
          "albumname" : "Machine Head",
          "year" : "1972",
          "genre" : "Рок"
        },
        {
          "albumname" : "Stormbringer",
          "year" : "1974",
          "genre" : "Рок"
        }
      ]
    },
    {
      "artistname" : "Joe Satriani",
      "born" : "1956",
      "albums" : [
        {
          "albumname" : "Flying in a Blue Dream",
          "year" : "1989",
          "genre" : "Инструментальный рок"
        },
        {
          "albumname" : "The Extremist",
          "year" : "1992",
          "genre" : "Инструментальный рок"
        },
        {
          "albumname" : "Shockwave Supernova",
          "year" : "2015",
          "genre" : "Инструментальный рок"
        }
      ]
    },
    {
      "artistname" : "Snoop Dogg",
      "born" : "1971",
      "albums" : [
        {
          "albumname" : "Tha Doggfather",
          "year" : "1996",
          "genre" : "Гангста-рэп"
        },
        {
          "albumname" : "Snoopified",
          "year" : "2005",
          "genre" : "Гангста-рэп"
        }
      ]
    }
  ]
}

Типы данных JSON

В JSON значение может быть одним из шести типов данных:

• cтрока;
• число;
• логический;
• null;
• объект;
• массив.
• Эти типы данных описаны ниже.

Примитивные типы

Структурные типы

Экранирование символов

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

Вот список символов, которые необходимо экранировать в JSON-файле.

Вы также можете использовать шестнадцатерич ный эквивалент для экранирования символа, например, \u002f или \u002F для представления символа косой черты.

JSON Schema

Рассмотрим следующий JSON-документ.

{
  "artists" : [
    { 
      "artistname" : "Deep Purple",
      "formed" : "1968"
    },
    { 
      "artistname" : "Joe Satriani",
      "born" : "1956-07-15" 
    },
    { 
      "artistname" : "Maroon 5",
      "formed" : "1994" 
    }
  ]
}

В данном примере применяется разный формат даты у объектов. Кроме того, один объект использует born (указывает, когда родился исполнитель), в то время как другие используют formed (когда образовалась группа/исполнитель).

В JSON нет правил, согласно которым некоторые объекты должны использовать определённый тип данных или даже содержать одинаковые поля. Им даже не нужно содержать одинаковое количество полей. Например, мы можем добавить поле favoritecolor к одному объекту, не добавляя его к другим.

Кроме того, нет правила, согласно которому данные должны быть в заданном формате. Например, поле born может быть представлено любым из следующих способов.

"born" : "1956"
"born" : 1956
"born" : "Июль 15, 1956"
"born" : "1956-07-15"
"born" : "07/15/1956"
"born" : "15/07/1956"
"born" : "Я люблю апельсины!"
"born" : [
  {
    "albumname" : "Flying in a Blue Dream",
    "year" : "1989",
    "genre" : "Инструментальный рок"
  }, 
  {
    "albumname" : "The Extremist",
    "year" : "1992",
    "genre" : "Инструментальный рок"
  },
  {
    "albumname" : "Shockwave Supernova",
    "year" : "2015",
    "genre" : "Инструментальный рок"
  }
]
"born" : "Упс!!!"

Да, верно — «Упс!!!». Вы можете вставить туда что угодно.

Эта гибкость — одна из вещей, которая делает JSON таким простым в использовании. Но она же одновременно может вызвать проблемы, показанные выше. Многие приложения, которые читают JSON-файлы, требуют, чтобы данные были в стандартном формате. Но даже если приложения это прочитают, людям будет трудно понять, какой именно датой является «Я люблю апельсины!».

Поэтому при работе с JSON часто требуется задать ограничения для типов данных, которые могут попадать в файл. Например, чтобы все даты вводились в определённом формате, скажем, ГГГГ-ММ-ДД. Или убедиться, что пользователи вводят только число в поле возраста.

Создание схемы

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

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

{ "type": "string" }

Вот пример базовой схемы JSON Schema (взят с json-schema.org).

{
  "title": "Example Schema",
  "type": "object",
  "properties": {
    "firstName": {
      "type": "string"
    },
    "lastName": {
      "type": "string"
    },
    "age": {
      "description": "Age in years",
      "type": "integer",
      "minimum": 0
    }
  },
  "required": ["firstName", "lastName"]
}

Можете использовать эту схему для проверки правильности ввода пользователем имени и возраста.

Как видите, JSON Schema на деле является тем же JSON. Так что не всегда легко определить что перед вами: JSON Schema или обычный JSON-документ.

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

Чтобы объявить JSON Schema, используйте ключевое слово $schema.

{ "$schema": "http://json-schema.org/schema#" }

В данном примере объявляется JSON Schema, написанная для текущей версии спецификации.

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

{ "$schema": "http://json-schema.org/draft-04/schema#" }

Для создания JSON Schema ознакомьтесь с JSONSchema.net. Это онлайн-инструмент, который автоматически генерирует JSON Schema из любого введённого вами JSON.

JSON и XML

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

Оказывается, JSON и XML имеют несколько разные цели, поэтому не всегда справедливо или уместно говорить, что одно «лучше» другого. Всё зависит от цели.

Давайте сперва рассмотрим пример документа на JSON и XML, содержащего одинаковые данные.

Пример на JSON

Вот некоторые данные, содержащиеся в JSON-документе.

{
  "artists" : [
    {
      "artistname" : "Deep Purple",
      "formed" : "1968",
      "albums" : [
        {
          "albumname" : "Machine Head",
          "year" : "1972",
          "genre" : "Рок"
        },
        {
          "albumname" : "Stormbringer",
          "year" : "1974",
          "genre" : "Рок"
        }
      ]
    }
  ]
}

Пример на XML

Те же данные, содержащиеся в XML-документе.

<artists>
  <artistname>Deep Purple</artistname>
  <formed>1968</formed>
  <albums>
    <album>
      <albumname>Machine Head</albumname>
      <year>1972</year>
      <genre>Рок</genre> 
    </album>
    <album>
      <albumname>Stormbringer</albumname>
      <year>1974</year>
      <genre>Рок</genre> 
    </album>
  </albums>
</artists>

Обучаемость

XML основан на тегах, поэтому его несколько легче выучить тем, кто привык к языкам разметки, таким как HTML или ColdFusion. Однако подобное утверждение можно сказать и в пользу JSON для тех, кто знаком с программированием на JavaScript или Си. Любому, кто испытывает сложности в понимании синтаксиса XML или JSON, вряд ли будет удобно работать с любым языком программирования или языком разметки.

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

Размер файла

XML требует закрывающих тегов (кроме самозакрывающихся элементов) и, скорее всего, приведёт к увеличению размера файла. Что может легко повлиять на время, требуемое для передачи файла (особенно если это большой файл и он передаётся по Интернету).

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

Метаданные

Одним из больших преимуществ XML по сравнению с JSON являются метаданные. В XML вы можете использовать атрибуты для хранения метаданных, а сами атрибуты могут размещаться внутри элемента и хранить больше информации об этом элементе.

Например, вы можете сделать что-то вроде этого.

...
  <album albumnumber="6">
...

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

Читабельность

Браузеры, как правило, отображают XML так, чтобы человеку было легче его читать. Читатель может сразу увидеть иерархическую структуру, а также развернуть и свернуть любой элемент в дереве.

Производительность

Исследования часто показывают, что JSON быстрее и потребляет меньше ресурсов, чем XML. Например, вот это исследование — Comparison of JSON and XML Data Interchange Formats: A Case Study [PDF] из Университета штата Монтана.

Вот также интересная статья, в которой сравнивается производительность между XML, JSON, CSV и Protocol Buffers с помощью разных парсеров. JSON, похоже, имеет преимущество над XML в различных тестах производительности.

Цель

JSON и XML служат двум разным целям.

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

XML, с другой стороны, является языком разметки, его цель — разметка документа. Несмотря на то, что XML легко выучить для обмена данными, можно узнать намного больше, если вы хотите научиться использовать XML в качестве языка разметки. Например, вам необходимо узнать, как создать определение типа документа, как использовать XSLT для преобразования документов XML в другую форму и как запрашивать XML-документы с помощью XPath.

Заключение

Итак, JSON и XML оба подходят для обмена данными. Что вы будете используете, зависит от ситуации.

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

Тем не менее, популярность JSON растёт, и он, безусловно, заменяет XML в качестве предпочтительного формата обмена данными по сети.

Кроме того, это не единственные форматы обмена данными, например, существуют и другие форматы, такие как Protocol Buffers. В зависимости от ситуации, CSV может оказаться даже лучшим форматом для работы.

Использование JSON с JavaScript

JSON основан на подмножестве JavaScript, а значит JSON-документ можно легко преобразовать в значение JavaScript.

Вот простой пример, как применять JavaScript для хранения JSON и вывода его на веб-странице.

Базовый пример

Это данные JSON, которые мы будем использовать в нашем примере.

{
  "artists" : [
    { 
      "artistname" : "Leonard Cohen",
      "born" : "1934"
    },
    { 
      "artistname" : "Joe Satriani",
      "born" : "1956" 
    },
    { 
      "artistname" : "Snoop Dogg",
      "born" : "1971"
    }
  ]
}

JavaScript применяется, чтобы взять эти данные JSON, отформатировать их с помощью тегов HTML и вывести их на веб-странице.

Сам код.

<!doctype html>
<title>Пример</title>
<script>
  function displayArtists() {
    // Наши данные JSON
    var data = 
      {
        "artists" : [
          {
            "artistname" : "Leonard Cohen",
            "born" : "1934"
          },
          {
            "artistname" : "Joe Satriani",
            "born" : "1956" 
          },
          {
            "artistname" : "Snoop Dogg",
            "born" : "1971"
          }
       ]
     } 

    // Вставляем данные в переменную и форматируем их с помощью тегов HTML
    var output = "<h1>Исполнители</h1>";
    output += "<ul>"; 

    // В цикле проходим по всем исполнителям
    for (var i in data.artists) {
      output += "<li>" + data.artists[i].artistname + " (Родился: " + 
        data.artists[i].born + ")</li>"; 
    }

    output += "</ul>";
    // Выводим данные в элементе artistList
    document.getElementById("artistList").innerHTML=output;
  } 

  // Вызываем функцию displayArtists при загрузке окна
  window.onload = displayArtists;
</script>

<!-- Показываем результаты здесь -->
<div id="artistList"></div>

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

Вложения для цикла

Вот ещё один пример. На этот раз мы будем использовать большой JSON-файл с более глубоким вложением.

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

<!doctype html>
<title>Пример</title>
<script>
  function displayArtists() {
    // Наши данные JSON
    var data = 
      {
        "artists" : [
          {
            "artistname" : "Deep Purple",
            "formed" : "1968",
            "albums" : [
              {
                "albumname" : "Machine Head",
                "year" : "1972",
                "genre" : "Рок"
              },
              {
                "albumname" : "Stormbringer",
                "year" : "1974",
                "genre" : "Рок"
              }
            ]
          },
          {
            "artistname" : "Joe Satriani",
            "born" : "1956",
            "albums" : [
              {
                "albumname" : "Flying in a Blue Dream",
                "year" : "1989",
                "genre" : "Инструментальный рок"
              },
              {
                "albumname" : "The Extremist",
                "year" : "1992",
                "genre" : "Инструментальный рок"
              },
              {
                "albumname" : "Shockwave Supernova",
                "year" : "2015",
                "genre" : "Инструментальный рок"
              }
            ]
          },
          {
            "artistname" : "Snoop Dogg",
            "born" : "1971",
            "albums" : [
              {
                "albumname" : "Tha Doggfather",
                "year" : "1996",
                "genre" : "Гангста-рэп"
              },
              {
                "albumname" : "Snoopified",
                "year" : "2005",
                "genre" : "Гангста-рэп"
              }
            ]
          }
        ]
      }

    // Вставляем данные в переменную и форматируем их с помощью тегов HTML
    var output = "<h1>Исполнители</h1>";

    // В цикле проходим по всем исполнителям
    for (var i in data.artists) {
      output += "<h2>" + data.artists[i].artistname + "</h2>"; 
      output += "<ul>";
  
      // Перебор альбомов для текущего исполнителя
      for (var j in data.artists[i].albums) {
        output += "<li>" + data.artists[i].albums[j].albumname;
      }
      output += "</ul>";
    }
    // Выводим данные в элементе artistList
    document.getElementById("artistlist").innerHTML=output;
  }

  // Вызываем функцию displayArtists при загрузке окна
  window.onload = displayArtists;
</script>

<!-- Показываем результаты здесь -->
<div id="artistlist"></div>

Как и в первом примере, здесь применяется функция, которая вызывается при загрузке страницы. Тем не менее, функция во втором примере использует два цикла for — один вложен в другой для извлечения вложенных данных.

Использование JSON для HTTP-запроса

JSON чаще всего используется в асинхронных HTTP-запросах. Это где приложение получает данные от другого приложения через HTTP-запрос по сети.

Базовый пример

В этом примере мы будем использовать файл artist.txt, который содержит следующие данные.

{
  "artists" : [
    { 
      "artistname" : "Leonard Cohen",
      "born" : "1934"
    },
    { 
      "artistname" : "Joe Satriani",
      "born" : "1956" 
    },
    { 
      "artistname" : "Snoop Dogg",
      "born" : "1971"
    }
  ]
}

Ниже показан пример веб-страницы, которая извлекает данные JSON через HTTP, а затем использует JavaScript, чтобы обернуть данные в теги HTML и вывести их в документе. Я добавил много комментариев для пояснения того, что делает каждая часть кода.

<!doctype html>
<title>Пример</title>
<script>
// Сохраняем XMLHttpRequest и адрес JSON-файла в переменных
var xhr = new XMLHttpRequest();
var url = "/example/artist.txt";
  
// Вызываем при изменении атрибута readyState
xhr.onreadystatechange = function() {
  // Проверяем, выполнен ли запрос на получение
  if (xhr.readyState == 4 && xhr.status == 200) {
    // Разбираем строку JSON
    var jsonData = JSON.parse(xhr.responseText); 
    // Вызываем showArtists() и передаём разобранный JSON
    showArtists(jsonData);
  }
};

// Выполняем HTTP-вызов, используя переменную url
xhr.open("GET", url, true);
xhr.send();

// Функция, которая форматирует строку с тегами HTML, а затем выводит результат
function showArtists(data) {
  var output = "<ul>"; // Открываем список
  var i;

  // Перебираем исполнителей и добавляем их как пункты списка
  for (var i in data.artists) {
    output += "<li>" + data.artists[i].artistname + " (Родился: " + data.artists[i].born + ")</li>"; 
  }
  
  output += "</ul>"; // Закрываем список
  // Выводим данные в элементе artistlist
  document.getElementById("artistList").innerHTML = output;
}
</script>
  
<!-- Показываем результаты здесь -->
<div id="artistList"></div>

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

XMLHttpRequest интенсивно применяется в AJAX. Несмотря на свое название, он может использоваться для извлечения данных любого типа, а не только XML.

XMLHttpRequest включает в себя ряд методов и атрибутов. В приведённом выше примере мы используем open() для инициализации запроса и send() для его отправки.

Использование JSON для HTTP через jQuery

Помимо применения JavaScript для извлечения файла JSON через HTTP, вы также можете сделать это с помощью библиотеки JavaScript, такой как jQuery.

Вот пример того, как можно использовать jQuery для извлечения JSON-файла через HTTP, а затем его вывода на веб-странице. Здесь мы опять воспользуемся файлом artist.txt, который содержит следующие данные.

{
  "artists" : [
    { 
      "artistname" : "Leonard Cohen",
      "born" : "1934"
    },
    { 
      "artistname" : "Joe Satriani",
      "born" : "1956" 
    },
    { 
      "artistname" : "Snoop Dogg",
      "born" : "1971"
    }
  ]
}

А вот код jQuery, который загрузит JSON-файл, отформатирует его содержимое с помощью тегов HTML, а затем отобразит результат.

<!doctype html>
<title>Пример</title>
<!-- Загружаем jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- Загружаем JSON-файл и выводим его -->
<script>
$(function() {
  // Пользователь щёлкнул по кнопке getData
  $("#getData").click(function() {

    // Сохраняем элемент artistList и адрес JSON-файла в переменных
    var artistList = $("#artistList");
    var url = "/example/artist.txt";

    // Получаем JSON-файл
    $.getJSON(url, function(data) {

      // Вставляем исполнителей в переменную
      var artists = data.artists.map(function(item) {
        return item.artistname + " (" + item.born + ")";
      });

      // Удаляем все дочерние узлы (включая текстовые)
      artistList.empty();

      // Форматируем исполнителей через теги HTML
      if (artists.length) {
        var content = "<li>" + artists.join("</li><li>") + "</li>";
        var list = $("<ul>").html(content);
        artistList.append(list);
      }
    });
  });
});
</script>
  
<!-- Показываем результаты здесь -->
<button id="getData">Показать исполнителей</button>
<div id="artistList"></div>

Метод $.ajax()

В jQuery также есть метод $.ajax(), который можно использовать вместо метода $.getJSON(). Метод $.ajax() применяется для выполнения асинхронного HTTP-запроса (AJAX). Разница в том, что $.ajax() предназначен не только для запросов JSON, он может использоваться и для запросов других типов, таких как XML, скрипты, HTML и даже запросы в виде простого текста.

Это работает так.

$.ajax({
  url: "/json/tutorial/artists.json",
  dataType: "json",
  success: function (data) {

    // Обрабатывайте данные JSON здесь

  }
});

Метод $.ajax() содержит множество параметров для настройки HTTP-запроса. Всё это объясняется в документации по jQuery API.