Aman mengubah string JSON menjadi objek


1336

Diberikan string data JSON, bagaimana saya bisa dengan aman mengubah string itu menjadi objek JavaScript?

Jelas saya bisa melakukan ini dengan tidak aman dengan sesuatu seperti:

var obj = eval("(" + json + ')');

tapi itu membuat saya rentan terhadap string JSON yang berisi kode lain, yang tampaknya sangat berbahaya hanya untuk eval.


77
Dalam kebanyakan bahasa, eval membawa risiko tambahan. Eval meninggalkan pintu terbuka untuk dieksploitasi oleh peretas. NAMUN, ingat bahwa semua javascript berjalan pada klien. HARAP bahwa itu akan diubah oleh peretas. Mereka dapat EVAL apa pun yang mereka inginkan, hanya dengan menggunakan konsol. Anda harus membangun perlindungan di sisi server.
Beachhouse

19
Ok, sekarang ini tahun 2014 dan Anda tidak boleh menggunakan evaluntuk mem-parsing string JSON karena Anda akan mengekspos kode Anda ke "injeksi kode". Gunakan JSON.parse(yourString)sebagai gantinya.
Daniel

Apakah data JSON literal?
shanechiu

@ Shanechiu: jika Anda maksud tipe data skalar, ya itu. Hanya sebuah string dengan sintaks nilai kunci di dalamnya.
0zkr PM

Jawaban:


1963

JSON.parse(jsonString) adalah pendekatan JavaScript murni selama Anda dapat menjamin browser yang cukup modern.


74
Saya cukup yakin ini aman untuk Node.js
Stephen

76
@vsync Anda menyadari bahwa ini adalah HANYA Jawaban Javascript Murni ... jika Anda membaca deskripsi untuk tag javascript Anda akan melihat ini ... " Kecuali jika tag untuk kerangka / pustaka juga disertakan, jawaban JavaScript murni adalah diharapkan. ".. Saya memberikan ini +1 karena menjadi satu-satunya jawaban javascript ...
iConnor


12
Jika Anda melakukan NodeJS, tidak ada cara saya akan memuat jQuery hanya untuk mem-parsing jsonString ke objek JSON. Jadi, pilihlah jawaban Jonathan
Antony

6
Menurut tautan ini didukung oleh IE8 +, meskipun dikatakan:Requires document to be in IE8+ standards mode to work in IE8.
JoshuaDavid

878

Metode jQuery sekarang sudah tidak digunakan lagi. Gunakan metode ini sebagai gantinya:

let jsonObject = JSON.parse(jsonString);

Jawaban asli menggunakan fungsi jQuery yang sudah usang :

Jika Anda menggunakan jQuery cukup gunakan:

jQuery.parseJSON( jsonString );

Persis seperti yang Anda cari (lihat dokumentasi jQuery ).


7
Apakah ada alasan untuk menggunakan ini di JSON.parse ()?
Jon

8
jQuery.parseJSONdefault untuk menggunakan JSON.parsejika ada, jadi satu-satunya alasan untuk menggunakan ini di atas yang asli adalah jika Anda membutuhkan cadangan untuk <IE7. Itu diubah kembali pada jQuery 1.6: james.padolsey.com/jquery/#v=1.6.0&fn=jQuery.parseJSON
Karl-Johan Sjögren

9
Pembaruan 2016: Pada jQuery 3.0, $ .parseJSON sudah usang dan Anda harus menggunakan metode JSON.parse asli sebagai gantinya.
jkdev

159

Jawaban ini untuk IE <7, untuk browser modern periksa jawaban Jonathan di atas.

Jawaban ini sudah usang dan jawaban Jonathan di atas ( JSON.parse(jsonString)) sekarang adalah jawaban terbaik .

JSON.org memiliki parser JSON untuk banyak bahasa termasuk empat yang berbeda untuk JavaScript. Saya percaya kebanyakan orang akan mempertimbangkan implementasi goto json2.js mereka.


24
Saya berharap orang-orang akan berhenti memilih suara ini. Itu akurat ketika diposting pada tahun 2008. Hanya upvote yang baru.
John

22
Jika jawabannya sudah usang, pertimbangkan untuk memperbaruinya.
Sotirios Delimanolis

2
untuk IE <8 Anda harus menggunakan ini.
Mahmoodvcs

74

Gunakan contoh kode sederhana di " JSON.parse () ":

var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);

dan membalikkannya:

var str = JSON.stringify(arr);

23

Saya tidak yakin tentang cara lain untuk melakukannya tetapi inilah cara Anda melakukannya di Prototipe (tutorial JSON) .

new Ajax.Request('/some_url', {
  method:'get',
  requestHeaders: {Accept: 'application/json'},
  onSuccess: function(transport){
    var json = transport.responseText.evalJSON(true);
  }
});

Memanggil evalJSON()dengan true sebagai argumen membersihkan string yang masuk.


22

Ini tampaknya menjadi masalah:

Input yang diterima melalui websocket Ajax dll, dan itu akan dalam format String, tetapi Anda perlu tahu apakah itu JSON.parsable. Masalahnya adalah, jika Anda selalu menjalankannya JSON.parse, program MUNGKIN melanjutkan "berhasil" tetapi Anda masih akan melihat kesalahan dilemparkan di konsol dengan yang ditakuti "Error: unexpected token 'x'".

var data;

try {
  data = JSON.parse(jqxhr.responseText);
} catch (_error) {}

data || (data = {
  message: 'Server error, please retry'
});

TIDAK. Masalahnya adalah bahwa Anda mengharapkan objek JSON dan bisa berakhir dengan (function(){ postCookiesToHostileServer(); }());atau bahkan hal-hal yang lebih buruk dalam konteks Node.
Yaur

Nah JSON.parse menggosok input fungsi (yang dalam hal ini tidak akan membantu sebagai objek IIF ->). Tampaknya cara terbaik untuk membahas hal ini adalah mencoba / menangkap. (Lihat edit)
Cody

18

Jika Anda menggunakan jQuery , Anda juga dapat menggunakan:

$.getJSON(url, function(data) { });

Maka Anda dapat melakukan hal-hal seperti

data.key1.something
data.key1.something_else

dll.


Anda menggunakan jQuery, bukan?
Alexandre C.

15
$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

Callback meneruskan data yang dikembalikan, yang akan menjadi objek JavaScript atau array seperti yang didefinisikan oleh struktur JSON dan diuraikan menggunakan $.parseJSON()metode ini.


12

Hanya untuk bersenang-senang, berikut ini cara menggunakan suatu fungsi:

 jsonObject = (new Function('return ' + jsonFormatData))()

1
Pendekatan yang menarik, saya tidak yakin saya akan menggunakan ini dengan JSON.Parse tersedia, tetapi senang melihat seseorang berpikir di luar kotak.

5
Ini sangat mirip dengan hanya menggunakan evaluntuk melakukannya dan tidak aman. : P
Florrie

7
Ini memiliki semua kekurangan dalam menggunakan evaltetapi lebih rumit dan sulit untuk dipahami oleh pengelola.
Quentin

9

Menggunakan JSON.parsemungkin merupakan cara terbaik.

Berikut ini contoh demo langsung .

var jsonRes = '{ "students" : [' +
          '{ "firstName":"Michel" , "lastName":"John" ,"age":18},' +
          '{ "firstName":"Richard" , "lastName":"Joe","age":20 },' +
          '{ "firstName":"James" , "lastName":"Henry","age":15 } ]}';
var studentObject = JSON.parse(jsonRes);

9

Cara termudah menggunakan parse()metode:

var response = '{"result":true,"count":1}';
var JsonObject= JSON.parse(response);

Kemudian Anda bisa mendapatkan nilai elemen JSON, misalnya:

var myResponseResult = JsonObject.result;
var myResponseCount = JsonObject.count;

Menggunakan jQuery seperti yang dijelaskan dalam jQuery.parseJSON()dokumentasi:

JSON.parse(jsonString);

9

Coba gunakan metode dengan objek Data ini. mis .: Data='{result:true,count:1}'

try {
  eval('var obj=' + Data);
  console.log(obj.count);
}
catch(e) {
  console.log(e.message);
}

Metode ini sangat membantu dalam Nodejs ketika Anda bekerja dengan pemrograman port serial


Sangat lucu bagaimana orang terpaku pada "eval is evil" dan mereka akan melakukan apa saja untuk menghindarinya, bahkan menulis ulang seluruh fungsionalitas eval ..
diynevala

Apakah konsensus trik ini adalah metode aman mengubah string menjadi objek JSON? Saya bisa menggunakan ini karena tidak ada impor js tambahan yang diperlukan.
Siapa

1
Pendekatan APAPUN menggunakan evalatau Functionsama-sama rentan
Slai

undefined; function bye() {...} bye();
Penyelamat

5

Saya menemukan cara "lebih baik":

Dalam CoffeeScript:

try data = JSON.parse(jqxhr.responseText)
data ||= { message: 'Server error, please retry' }

Dalam Javascript:

var data;

try {
  data = JSON.parse(jqxhr.responseText);
} catch (_error) {}

data || (data = {
  message: 'Server error, please retry'
});

4

Penguraian JSON selalu menyebalkan. Jika inputnya tidak seperti yang diharapkan, ia melempar kesalahan dan membuat crash apa yang Anda lakukan.

Anda dapat menggunakan fungsi kecil berikut untuk mengurai input Anda dengan aman. Itu selalu mengubah objek bahkan jika inputnya tidak valid atau sudah menjadi objek yang lebih baik untuk kebanyakan kasus:

JSON.safeParse = function (input, def) {
  // Convert null to empty object
  if (!input) {
    return def || {};
  } else if (Object.prototype.toString.call(input) === '[object Object]') {
    return input;
  }
  try {
    return JSON.parse(input);
  } catch (e) {
    return def || {};
  }
};

Object.prototype.toString.call(input) === '[object Object]'harus typeof input === 'object'IMO
Serge K.

input typeof mengembalikan objek untuk null dan array juga. Jadi ini bukan cara yang aman untuk melakukan ini.
Tahsin Turkoz

Anda sudah membahas nullcase sebelumnya, dan array adalah Object. Jika Anda ingin mengujinya, Anda bisa menggunakannya instanceof. Selain itu, jika Anda memberikan fungsi ini Array, ia akan menangkap dan return defketika bisa mengembalikan array yang sangat baik
Serge K.

Komentar saya adalah tentang akal sehat saat menangkap benda. Fungsi saya dapat memiliki beberapa pencegahan tetapi menggunakan input typeof bukanlah cara yang lebih disukai untuk mendeteksi objek secara umum.
Tahsin Turkoz

IMO, akal sehat tidak menggunakan toString()metode untuk memeriksa apakah suatu variabel adalah objek atau tidak. Lihat AngularJS , jQuery , Underscore , atau bahkan devs
Serge K.


3

Jika kita memiliki string seperti ini:

"{\"status\":1,\"token\":\"65b4352b2dfc4957a09add0ce5714059\"}"

maka kita cukup menggunakan JSON.parsedua kali untuk mengonversi string ini menjadi objek JSON:

var sampleString = "{\"status\":1,\"token\":\"65b4352b2dfc4957a09add0ce5714059\"}"
var jsonString= JSON.parse(sampleString)
var jsonObject= JSON.parse(jsonString)

Dan kita dapat mengekstraksi nilai dari objek JSON menggunakan:

// instead of last JSON.parse:
var { status, token } = JSON.parse(jsonString);

Hasilnya adalah:

status = 1 and token = 65b4352b2dfc4957a09add0ce5714059

3

JSON.parse() mengubah string JSON apa saja yang diteruskan ke fungsi menjadi objek JSON.

Untuk memahaminya dengan lebih baik, tekan F12untuk membuka "Periksa Elemen" di browser Anda dan pergi ke konsol untuk menulis perintah berikut:

var response = '{"result":true,"count":1}'; //sample json object(string form)
JSON.parse(response); //converts passed string to JSON Object.

Sekarang jalankan perintah:

console.log(JSON.parse(response));

Anda akan mendapatkan output sebagai Obyek {result: true, count: 1}.

Untuk menggunakan Obyek itu, Anda dapat menetapkannya ke variabel, mungkin obj:

var obj = JSON.parse(response);

Dengan menggunakan objdan .operator dot ( ) Anda dapat mengakses properti dari objek JSON.

Coba jalankan perintah:

console.log(obj.result);

3

Dokumentasi resmi :

The JSON.parse()Metode mem-parsing string JSON, membangun nilai JavaScript atau objek yang dijelaskan oleh string. reviverFungsi opsional dapat disediakan untuk melakukan transformasi pada objek yang dihasilkan sebelum dikembalikan.

Sintaksis:

JSON.parse(text[, reviver])

Parameter:

text : String yang diurai sebagai JSON. Lihat objek JSON untuk deskripsi sintaks JSON.

reviver (optional) : Jika suatu fungsi, ini menentukan bagaimana nilai yang awalnya dihasilkan oleh parsing ditransformasikan, sebelum dikembalikan.

Nilai pengembalian

Objek yang sesuai dengan teks JSON yang diberikan.

Pengecualian

Melempar pengecualian SyntaxError jika string untuk mem-parse tidak valid JSON.



2

Pisahkan string JSON dengan JSON.parse(), dan data menjadi objek JavaScript:

JSON.parse(jsonString)

Di sini, JSON mewakili untuk memproses dataset JSON.

Bayangkan kami menerima teks ini dari server web:

'{ "name":"John", "age":30, "city":"New York"}'

Untuk menguraikan objek JSON:

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}'); 

Berikut objadalah objek JSON masing-masing yang terlihat seperti:

{ "name":"John", "age":30, "city":"New York"}

Untuk mengambil nilai, gunakan .operator:

obj.name // John
obj.age //30

Konversi objek JavaScript menjadi string dengan JSON.stringify().


1

Hanya untuk pengurai sampul untuk berbagai jenis input

Mengurai data dengan JSON.parse (), dan data menjadi objek JavaScript.

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

Saat menggunakan JSON.parse () pada JSON yang berasal dari array, metode akan mengembalikan array JavaScript, bukan objek JavaScript.

var myArr = JSON.parse(this.responseText);
console.log(myArr[0]);

Objek tanggal tidak diizinkan di JSON. Untuk Dates lakukan hal seperti ini

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

Fungsi tidak diizinkan di JSON. Jika Anda perlu memasukkan fungsi, tulis sebagai string.

var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

0

Pertanyaan yang lebih lama, saya tahu, namun tidak ada yang memperhatikan solusi ini dengan menggunakan new Function(), fungsi anonim yang mengembalikan data.


Contoh saja:

 var oData = 'test1:"This is my object",test2:"This is my object"';

 if( typeof oData !== 'object' )
  try {
   oData = (new Function('return {'+oData+'};'))();
  }
  catch(e) { oData=false; }

 if( typeof oData !== 'object' )
  { alert( 'Error in code' ); }
 else {
        alert( oData.test1 );
        alert( oData.test2 );
      }

Ini sedikit lebih aman karena dijalankan di dalam suatu fungsi dan tidak dikompilasi dalam kode Anda secara langsung. Jadi jika ada deklarasi fungsi di dalamnya, itu tidak akan terikat ke objek jendela default.

Saya menggunakan ini untuk 'mengkompilasi' pengaturan konfigurasi elemen DOM (misalnya atribut data) sederhana dan cepat.


0

Ringkasan:

Javascript (baik browser dan NodeJS) memiliki objek bawaan JSON. Pada Obyek ini ada 2 metode yang mudah untuk berurusan dengan JSON. Mereka adalah sebagai berikut:

  1. JSON.parse() Dibawa JSONsebagai argumen, mengembalikan objek JS
  2. JSON.stringify() Mengambil objek JS sebagai argumen mengembalikan JSONobjek

Aplikasi lain:

Selain itu untuk sangat nyaman berhadapan dengan JSONmereka dapat digunakan untuk cara lain. Kombinasi kedua JSONmetode ini memungkinkan kita untuk membuat klon array atau objek yang sangat mudah. Sebagai contoh:

let arr1 = [1, 2, [3 ,4]];
let newArr = arr1.slice();

arr1[2][0] = 'changed'; 
console.log(newArr); // not a deep clone

let arr2 = [1, 2, [3 ,4]];
let newArrDeepclone = JSON.parse(JSON.stringify(arr2));

arr2[2][0] = 'changed'; 
console.log(newArrDeepclone); // A deep clone, values unchanged


0

Anda juga dapat menggunakan reviverfungsi untuk memfilter.

var data = JSON.parse(jsonString, function reviver(key, value) {
   //your code here to filter
});

Untuk informasi lebih lanjut, baca JSON.parse.


0

JSON.parse adalah cara yang tepat untuk mengubah string menjadi objek tetapi jika string yang diuraikan bukan objek atau jika string tidak benar maka akan menimbulkan kesalahan yang akan menyebabkan sisa kode rusak sehingga ideal untuk membungkus fungsi JSON.parse di dalam try-catch like

try{
   let obj = JSON.parse(string);
}catch(err){
   console.log(err);
}

-1

Coba ini. Yang ini ditulis dalam naskah.

         export function safeJsonParse(str: string) {
               try {
                 return JSON.parse(str);
                   } catch (e) {
                 return str;
                 }
           }

Saya baru mengenal naskah. Apa manfaatnya ini JSON.parse()?
Marc L.

Jika ada pengecualian, ini akan mengembalikan string input itu sendiri
Supun Dharmarathne

-1
/**
 * Safely turning a JSON string into an object
 *
 * @param {String} str - JSON String
 * @returns deserialized object, false if error
 */
export function jsonParse(str) {
  let data = null;
  try {
    data = JSON.parse(str);
  } catch (err) {
    return false;
  }
  return data;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.