Cara mendapatkan respons json dari rest api di javascript

Question

JSON, atau Notasi Objek JavaScript, ada di sekitar kita. Jika Anda pernah menggunakan aplikasi web, kemungkinan besar aplikasi tersebut menggunakan JSON untuk menyusun, menyimpan, dan mengirimkan data antara servernya dan perangkat Anda

Table of Contents Show

Perbedaan antara JSON dan JavaScript
Objek JSON vs Literal Objek JavaScript
Array JSON vs array JavaScript
JSON sebagai string
Cara mengurai JSON di browser
Cara mengurai JSON dengan const profiles = [ { name: 'Jane Doe', 'favorite-game': 'Stardew Valley', subscriber: false }, { name: 'John Doe', 'favorite-game': 'Dragon Quest XI', subscriber: true } ]; _7
Cara merangkai JSON dengan {"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}2
Cara bekerja dengan file JSON lokal di browser
Cara mengurai JSON di Node. js
Cara mengurai file JSON dengan fetch('https://api.chucknorris.io/jokes/random?category=dev') .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal .then(data => console.log(data)); 3
Cara mengurai file JSON dengan fetch('https://api.chucknorris.io/jokes/random?category=dev') .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal .then(data => console.log(data)); 5) dan fetch('https://api.chucknorris.io/jokes/random?category=dev') .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal .then(data => console.log(data)); 6
Cara mengurai JSON dengan const newJoke = { categories: ['dev'], value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command." }; 4) dan fetch('https://api.chucknorris.io/jokes/random?category=dev') .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal .then(data => console.log(data)); 6
Cara merangkai JSON dengan {"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}2 di Node. js
Bagaimana cara mengembalikan respons JSON dari REST API?
Bagaimana cara mem-parsing respons JSON dari API dalam JavaScript?
Bagaimana cara mengakses respons JSON dalam JavaScript?
Bagaimana cara mencetak data JSON dari API dalam JavaScript?

Pada artikel ini, kita akan membahas secara singkat perbedaan antara JSON dan JavaScript, lalu beralih ke berbagai cara untuk mengurai JSON dengan JavaScript di browser dan di Node. proyek js

Perbedaan antara JSON dan JavaScript

Meskipun JSON terlihat seperti JavaScript biasa, lebih baik menganggap JSON sebagai format data, mirip dengan file teks. Kebetulan JSON terinspirasi oleh sintaks JavaScript, itulah sebabnya mereka terlihat sangat mirip

Mari kita lihat objek JSON dan larik JSON dan bandingkan dengan JavaScript

Objek JSON vs Literal Objek JavaScript

Pertama, inilah objek JSON

{
  "name": "Jane Doe",
  "favorite-game": "Stardew Valley",
  "subscriber": false
}

profil jane. json

Perbedaan utama antara objek JSON dan objek JavaScript biasa – juga disebut literal objek – terletak pada tanda kutip. Semua kunci dan nilai tipe string dalam objek JSON harus dibungkus dengan tanda kutip ganda (

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

9)

Literal objek JavaScript sedikit lebih fleksibel. Dengan literal objek, Anda tidak perlu membungkus kunci dan string dalam tanda kutip ganda. Sebaliknya, Anda dapat menggunakan tanda kutip tunggal (

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

0), atau tidak menggunakan jenis tanda kutip apa pun untuk kunci

Berikut adalah tampilan kode di atas sebagai literal objek JavaScript

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

Perhatikan bahwa kunci

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

_1 dibungkus dengan tanda kutip tunggal. Dengan literal objek, Anda harus membungkus kunci di mana kata dipisahkan dengan tanda hubung (

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

2) dalam tanda kutip

Jika Anda ingin menghindari tanda kutip, Anda dapat menulis ulang kunci untuk menggunakan huruf besar kecil (

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

3) atau memisahkan kata dengan garis bawah (

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

4) sebagai gantinya

Array JSON vs array JavaScript

Array JSON bekerja hampir sama dengan array di JavaScript, dan dapat berisi string, boolean, angka, dan objek JSON lainnya. Misalnya

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

_profil. json

Inilah tampilannya di JavaScript biasa

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

JSON sebagai string

Anda mungkin bertanya-tanya, jika ada objek dan array JSON, tidak bisakah Anda menggunakannya dalam program Anda seperti literal atau array objek JavaScript biasa?

Alasan mengapa Anda tidak dapat melakukan ini adalah karena JSON sebenarnya hanyalah sebuah string

Misalnya, ketika Anda menulis JSON dalam file terpisah seperti dengan

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

5 atau

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

6 di atas, file tersebut sebenarnya berisi teks dalam bentuk objek atau larik JSON, yang kebetulan terlihat seperti JavaScript

Dan jika Anda membuat permintaan ke API, itu akan mengembalikan sesuatu seperti ini

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

Sama seperti file teks, jika Anda ingin menggunakan JSON dalam proyek Anda, Anda harus mengurai atau mengubahnya menjadi sesuatu yang dapat dipahami oleh bahasa pemrograman Anda. Misalnya, mem-parsing objek JSON dengan Python akan membuat kamus

Dengan pemahaman itu, mari kita lihat berbagai cara untuk mengurai JSON dalam JavaScript

Cara mengurai JSON di browser

Jika Anda bekerja dengan JSON di browser, Anda mungkin menerima atau mengirim data melalui API

Mari kita lihat beberapa contoh

Cara mengurai JSON dengan const profiles = [ { name: 'Jane Doe', 'favorite-game': 'Stardew Valley', subscriber: false }, { name: 'John Doe', 'favorite-game': 'Dragon Quest XI', subscriber: true } ]; _7

Cara termudah untuk mendapatkan data dari API adalah dengan

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

7, yang menyertakan metode

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

9 untuk mengurai respons JSON menjadi literal atau larik objek JavaScript yang dapat digunakan secara otomatis

Berikut beberapa kode yang menggunakan

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

_7 untuk membuat permintaan

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

1 untuk lelucon bertema pengembang dari Chuck Norris Jokes API gratis

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

Jika Anda menjalankan kode itu di browser, Anda akan melihat sesuatu seperti ini masuk ke konsol

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

Meskipun terlihat seperti objek JSON, sebenarnya ini adalah literal objek JavaScript, dan Anda dapat menggunakannya secara bebas di program Anda

Cara merangkai JSON dengan {"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}2

Tetapi bagaimana jika Anda ingin mengirim data ke API?

Misalnya, Anda ingin mengirimkan lelucon Chuck Norris ke API Lelucon Chuck Norris agar orang lain dapat membacanya nanti

Pertama, Anda akan menulis lelucon Anda sebagai objek JS literal

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

Kemudian, karena Anda mengirim data ke API, Anda harus mengubah literal objek

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

3 Anda menjadi string JSON

Untungnya, JavaScript menyertakan metode yang sangat membantu untuk melakukannya –

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

2

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

console.log(typeof JSON.stringify(newJoke)); // string

Saat kami mengonversi literal objek menjadi string JSON dalam contoh ini,

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

2 juga berfungsi dengan array

Terakhir, Anda hanya perlu mengirim lelucon bersenar JSON Anda kembali ke API dengan permintaan

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

6

Perhatikan bahwa Chuck Norris Jokes API sebenarnya tidak memiliki fitur ini. Tetapi jika ya, seperti inilah tampilan kodenya

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

fetch('https://api.chucknorris.io/jokes/submit', { // fake API endpoint
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(newJoke), // turn the JS object literal into a JSON string
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    console.error(err);
  });

Dan begitu saja, Anda telah mengurai JSON yang masuk dengan

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

7 dan menggunakan

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

2 untuk mengubah literal objek JS menjadi string JSON

Cara bekerja dengan file JSON lokal di browser

Sayangnya, tidak mungkin (atau disarankan) memuat file JSON lokal di browser

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

7 akan menimbulkan kesalahan jika Anda mencoba memuat file lokal. Misalnya, Anda memiliki file JSON dengan beberapa lelucon

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

0lelucon. json

Dan Anda ingin menguraikannya dan membuat daftar lelucon di halaman HTML sederhana

Jika Anda membuat halaman dengan yang berikut dan membukanya di browser Anda

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

1indeks. html

Anda akan melihat ini di konsol

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

2

Secara default, browser tidak mengizinkan akses ke file lokal untuk alasan keamanan. Ini adalah hal yang baik, dan Anda tidak boleh mencoba mengatasi perilaku ini

Sebagai gantinya, hal terbaik untuk dilakukan adalah mengonversi file JSON lokal menjadi JavaScript. Untungnya, ini cukup mudah karena sintaks JSON sangat mirip dengan JavaScript

Yang perlu Anda lakukan hanyalah membuat file baru dan mendeklarasikan JSON Anda sebagai variabel

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

3lelucon. js

Dan tambahkan ke halaman Anda sebagai skrip terpisah

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

_4

Anda akan dapat menggunakan larik

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

0 secara bebas dalam kode Anda

Anda juga dapat menggunakan JavaScript

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

_1 untuk melakukan hal yang sama, tetapi itu sedikit di luar cakupan artikel ini

Tetapi bagaimana jika Anda ingin bekerja dengan file JSON lokal dan memiliki Node. js diinstal?

Cara mengurai JSON di Node. js

Node. js adalah runtime JavaScript yang memungkinkan Anda menjalankan JavaScript di luar browser. Anda dapat membaca semua tentang Node. js di sini

Apakah Anda menggunakan Node. js untuk menjalankan kode secara lokal di komputer Anda, atau untuk menjalankan seluruh aplikasi web di server, ada baiknya mengetahui cara bekerja dengan JSON

Untuk contoh berikut, kami akan menggunakan file

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

2 yang sama

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

0lelucon. json

Cara mengurai file JSON dengan fetch('https://api.chucknorris.io/jokes/random?category=dev') .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal .then(data => console.log(data)); 3

Mari kita mulai dengan metode termudah

Jika Anda memiliki file JSON lokal, yang perlu Anda lakukan hanyalah menggunakan

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

3 untuk memuatnya seperti Node lainnya. modul js

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

6

File JSON akan diuraikan untuk Anda secara otomatis dan Anda dapat mulai menggunakannya dalam proyek Anda

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

_7

Perhatikan bahwa ini sinkron, artinya program Anda akan berhenti hingga mem-parsing seluruh file sebelum melanjutkan. File JSON yang sangat besar dapat menyebabkan program Anda melambat, jadi berhati-hatilah dengan itu

Juga, karena mem-parsing JSON dengan cara ini memuat semuanya ke dalam memori, lebih baik menggunakan metode ini untuk file JSON statis. Jika file JSON berubah saat program Anda berjalan, Anda tidak akan memiliki akses ke perubahan tersebut hingga Anda memulai ulang program dan mengurai file JSON yang diperbarui

Cara mengurai file JSON dengan fetch('https://api.chucknorris.io/jokes/random?category=dev') .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal .then(data => console.log(data)); 5) dan fetch('https://api.chucknorris.io/jokes/random?category=dev') .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal .then(data => console.log(data)); 6

Ini adalah cara yang lebih tradisional (karena tidak ada istilah yang lebih baik) untuk mengurai file JSON di Node. Proyek js – baca file dengan modul

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

7 (sistem file), lalu parsing dengan

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

6

Mari kita lihat bagaimana melakukannya dengan metode ________18______9. Pertama, tambahkan modul

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

_7 ke proyek Anda

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

8

Kemudian, buat variabel baru untuk menyimpan output dari file

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

2 dan atur sama dengan

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

9

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

_9

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

_9 mengambil beberapa argumen. Yang pertama adalah jalur ke file yang ingin Anda baca

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

_0

Tetapi jika Anda memasukkan

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

4 ke konsol sekarang, Anda akan melihat sesuatu seperti ini

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

_1

Itu hanya berarti bahwa modul

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

_7 sedang membaca file, tetapi tidak mengetahui pengkodean atau format file tersebut.

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

_7 dapat digunakan untuk memuat hampir semua file, dan bukan hanya yang berbasis teks seperti JSON, jadi kita perlu memberi tahu cara file dikodekan

Untuk file berbasis teks, penyandian biasanya

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

7

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

_2

Sekarang jika Anda masuk

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

_4 ke konsol, Anda akan melihat konten file

Namun sejauh ini kami hanya membaca file, dan itu masih berupa string. Kita harus menggunakan metode lain untuk mengurai

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

4 menjadi objek atau larik JavaScript yang dapat digunakan

Untuk melakukannya, kita akan menggunakan

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

6

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

_3

Seperti namanya,

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

_6 mengambil string JSON dan mem-parsingnya menjadi literal atau larik objek JavaScript

Seperti dengan metode

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

_2 di atas,

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

9 adalah metode sinkron, artinya dapat menyebabkan program Anda melambat jika membaca file besar, JSON atau lainnya

Juga, itu hanya membaca file sekali dan memuatnya ke dalam memori. Jika file berubah, Anda harus membaca file lagi di beberapa titik. Untuk mempermudah, Anda mungkin ingin membuat fungsi sederhana untuk membaca file

Inilah tampilannya

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

_4

Cara mengurai JSON dengan const newJoke = { categories: ['dev'], value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command." }; 4) dan fetch('https://api.chucknorris.io/jokes/random?category=dev') .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal .then(data => console.log(data)); 6

Metode

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

_6 sangat mirip dengan

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

9, kecuali metode ini bekerja secara asinkron. Ini bagus jika Anda memiliki file besar untuk dibaca dan Anda tidak ingin menyimpan sisa kode Anda

Ini contoh dasarnya

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

_5

Sejauh ini terlihat mirip dengan apa yang kita lakukan dengan

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

9, kecuali kita tidak menugaskannya ke variabel seperti

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

4. Karena asinkron, kode apa pun setelah

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

6 akan berjalan sebelum selesai membaca file

Sebagai gantinya, kami akan menggunakan fungsi callback dan mengurai JSON di dalamnya

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

_6

Yang mencetak berikut ke konsol

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

_7

Seperti dengan

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

_9,

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

6 memuat file ke dalam memori, artinya Anda harus membaca file itu lagi jika ada perubahan

Juga, meskipun

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

_6 asinkron, pada akhirnya memuat seluruh file yang sedang dibaca ke dalam memori. Jika Anda memiliki file besar, mungkin lebih baik untuk melihat Node. js streaming sebagai gantinya

Cara merangkai JSON dengan {"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}2 di Node. js

Terakhir, jika Anda mem-parsing JSON dengan Node. js, ada kemungkinan besar Anda perlu mengembalikan JSON di beberapa titik, mungkin sebagai respons API

Untungnya, ini bekerja dengan cara yang sama seperti di browser – cukup gunakan

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

2 untuk mengonversi literal atau larik objek JavaScript menjadi string JSON

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

_8

Dan itu saja. Kami telah membahas hampir semua hal yang perlu Anda ketahui tentang bekerja dengan JSON di browser dan di Node. proyek js

Sekarang keluarlah dan parsing atau string JSON ke isi hati Anda

Apakah saya melewatkan sesuatu?

Kris Koishigawa

Baca lebih banyak posting

Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Bagaimana cara mengembalikan respons JSON dari REST API?

Untuk mengembalikan JSON dari server, Anda harus menyertakan data JSON dalam isi pesan respons HTTP dan memberikan "Content-Type. tajuk respons aplikasi/json" . Header respons Tipe-Konten memungkinkan klien menginterpretasikan data dalam badan respons dengan benar.

Bagaimana cara mem-parsing respons JSON dari API dalam JavaScript?

Contoh - Mengurai JSON . parse() untuk mengonversi teks menjadi objek JavaScript Use the JavaScript function JSON.parse() to convert text into a JavaScript object . const obj = JSON. parse('{"nama". "Yohanes", "umur". 30, "kota". "New York"}'); .

Bagaimana cara mengakses respons JSON dalam JavaScript?

Untuk mengakses objek JSON di JavaScript, parse dengan JSON. parse() , dan akses melalui “. ” atau “[]” .

Bagaimana cara mencetak data JSON dari API dalam JavaScript?

Untuk mencetak JSON dengan cantik di JavaScript, Anda dapat menggunakan JSON. merangkai(obj, pengganti, spasi) metode . Parameter ketiga dari JSON. stringify() metode menentukan jumlah spasi yang akan digunakan saat mengeluarkan string JSON.

kode javascript