Biến một cách an toàn một chuỗi JSON thành một đối tượng

Đưa ra một chuỗi dữ liệu JSON, làm cách nào tôi có thể biến chuỗi đó thành đối tượng JavaScript một cách an toàn?

Rõ ràng tôi có thể làm điều này một cách không an toàn với một cái gì đó như:

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

nhưng điều đó khiến tôi dễ bị tổn thương bởi chuỗi JSON chứa mã khác, điều này có vẻ rất nguy hiểm khi chỉ đơn giản là eval.

JSON.parse(jsonString) là một cách tiếp cận JavaScript thuần túy miễn là bạn có thể đảm bảo một trình duyệt hợp lý hiện đại.

Phương thức jQuery hiện không được chấp nhận. Sử dụng phương pháp này thay thế:

let jsonObject = JSON.parse(jsonString);

Câu trả lời gốc sử dụng chức năng jQuery không dùng nữa :

Nếu bạn đang sử dụng jQuery, chỉ cần sử dụng:

jQuery.parseJSON( jsonString );

Đó chính xác là những gì bạn đang tìm kiếm (xem tài liệu jQuery ).

Câu trả lời này dành cho IE <7, đối với các trình duyệt hiện đại, hãy kiểm tra câu trả lời của Jonathan ở trên.

Câu trả lời này đã lỗi thời và câu trả lời của Jonathan ở trên ( JSON.parse(jsonString)) hiện là câu trả lời tốt nhất .

JSON.org có các trình phân tích cú pháp JSON cho nhiều ngôn ngữ, bao gồm bốn ngôn ngữ khác nhau cho JavaScript. Tôi tin rằng hầu hết mọi người sẽ xem xét việc thực hiện goto của json2.js .

Sử dụng ví dụ mã đơn giản trong " JSON.parse () ":

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

và đảo ngược nó:

var str = JSON.stringify(arr);

Tôi không chắc chắn về các cách khác để làm điều đó nhưng đây là cách bạn thực hiện trong Prototype (hướng dẫn JSON) .

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

Gọi evalJSON()với đúng như đối số vệ sinh chuỗi đến.

Đây dường như là vấn đề:

Một đầu vào được nhận thông qua Ajax websocket, v.v. và nó sẽ ở định dạng Chuỗi, nhưng bạn cần biết nếu có JSON.parsable. Vấn đề là, nếu bạn luôn chạy nó JSON.parse, chương trình CÓ THỂ tiếp tục "thành công" nhưng bạn vẫn sẽ thấy một lỗi được ném trong bảng điều khiển với sự sợ hãi "Error: unexpected token 'x'".

var data;

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

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

Nếu bạn đang sử dụng jQuery , bạn cũng có thể sử dụng:

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

Sau đó, bạn có thể làm những việc như

data.key1.something
data.key1.something_else

Vân vân.

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

Cuộc gọi lại được truyền dữ liệu trả về, đây sẽ là một đối tượng hoặc mảng JavaScript như được định nghĩa bởi cấu trúc JSON và được phân tích cú pháp bằng $.parseJSON()phương thức.

Để giải trí, đây là cách sử dụng chức năng:

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

Sử dụng JSON.parsecó lẽ là cách tốt nhất.

Đây là một ví dụ demo trực tiếp .

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);

Cách dễ nhất để sử dụng parse()phương pháp:

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

Sau đó, bạn có thể lấy các giá trị của các phần tử JSON, ví dụ:

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

Sử dụng jQuery như được mô tả trong jQuery.parseJSON()tài liệu:

JSON.parse(jsonString);

Hãy thử sử dụng phương thức với đối tượng Dữ liệu này. ví dụ: Data='{result:true,count:1}'

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

Phương pháp này thực sự hữu ích trong Nodejs khi bạn đang làm việc với lập trình cổng nối tiếp

Tôi tìm thấy một cách "tốt hơn":

Trong CoffeeScript:

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

Trong Javascript:

var data;

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

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

Phân tích cú pháp JSON luôn là một nỗi đau. Nếu đầu vào không như mong đợi, nó sẽ báo lỗi và làm hỏng những gì bạn đang làm.

Bạn có thể sử dụng chức năng nhỏ sau đây để phân tích cú pháp đầu vào của bạn một cách an toàn. Nó luôn biến một đối tượng ngay cả khi đầu vào không hợp lệ hoặc đã là một đối tượng tốt hơn cho hầu hết các trường hợp:

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 || {};
  }
};

JSON.parse(jsonString);

json.parse sẽ thay đổi thành đối tượng.

Nếu chúng ta có một chuỗi như thế này:

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

sau đó chúng ta chỉ cần sử dụng JSON.parsehai lần để chuyển đổi chuỗi này thành đối tượng JSON:

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

Và chúng ta có thể trích xuất các giá trị từ đối tượng JSON bằng cách sử dụng:

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

Kết quả sẽ là:

status = 1 and token = 65b4352b2dfc4957a09add0ce5714059

JSON.parse() chuyển đổi bất kỳ chuỗi JSON nào được truyền vào hàm thành một đối tượng JSON.

Để hiểu rõ hơn, nhấn F12để mở "Kiểm tra phần tử" trong trình duyệt của bạn và đi đến bảng điều khiển để viết các lệnh sau:

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

Bây giờ hãy chạy lệnh:

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

Bạn sẽ nhận được đầu ra dưới dạng Object {result: true, count: 1} .

Để sử dụng Đối tượng đó, bạn có thể gán nó cho biến, có thể obj:

var obj = JSON.parse(response);

Bằng cách sử dụng objvà dấu chấm (. toán tử ), bạn có thể truy cập các thuộc tính của đối tượng JSON.

Hãy thử chạy lệnh:

console.log(obj.result);

Tài liệu chính thức :

Các JSON.parse()phương pháp phân tích một chuỗi JSON, xây dựng giá trị JavaScript hoặc đối tượng được mô tả bởi chuỗi. Một tùy chọnreviver chức năng có thể được cung cấp để thực hiện chuyển đổi trên đối tượng kết quả trước khi nó được trả về.

Cú pháp:

JSON.parse(text[, reviver])

Thông số:

text : Chuỗi phân tích cú pháp dưới dạng JSON. Xem đối tượng JSON để biết mô tả về cú pháp JSON.

reviver (optional) : Nếu một hàm, điều này quy định cách giá trị ban đầu được tạo ra bằng cách phân tích cú pháp được chuyển đổi, trước khi được trả về.

Giá trị trả về

Đối tượng tương ứng với văn bản JSON đã cho.

Ngoại lệ

Ném một ngoại lệ SyntaxError nếu chuỗi phân tích cú pháp không phải là JSON hợp lệ.

Chuyển đổi đối tượng thành JSON và sau đó phân tích cú pháp nó, hoạt động với tôi, như:

JSON.parse(JSON.stringify(object))

Phân tích chuỗi JSON JSON.parse()và dữ liệu trở thành đối tượng JavaScript:

JSON.parse(jsonString)

Ở đây, JSON đại diện để xử lý bộ dữ liệu JSON.

Hãy tưởng tượng chúng tôi đã nhận được văn bản này từ một máy chủ web:

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

Để phân tích thành một đối tượng JSON:

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

Đây objlà đối tượng JSON tương ứng trông như sau:

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

Để tìm nạp một giá trị, sử dụng .toán tử:

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

Chuyển đổi một đối tượng JavaScript thành một chuỗi với JSON.stringify().

Chỉ cần phân tích cú pháp cho các loại đầu vào khác nhau

Phân tích dữ liệu bằng JSON.parse () và dữ liệu trở thành đối tượng JavaScript.

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

Khi sử dụng JSON.parse () trên JSON xuất phát từ một mảng, phương thức sẽ trả về một mảng JavaScript, thay vì một đối tượng JavaScript.

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

Các đối tượng ngày không được phép trong JSON. Đối với những ngày làm điều gì đó như thế này

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

Các hàm không được phép trong JSON. Nếu bạn cần bao gồm một hàm, hãy viết nó dưới dạng một chuỗi.

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

Câu hỏi cũ hơn, tôi biết, tuy nhiên không ai chú ý đến giải pháp này bằng cách sử dụng new Function()một hàm ẩn danh trả về dữ liệu.

Chỉ là một ví dụ:

 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 );
      }

Điều này an toàn hơn một chút vì nó thực thi bên trong một hàm và không biên dịch trực tiếp mã của bạn. Vì vậy, nếu có một khai báo hàm bên trong nó, nó sẽ không bị ràng buộc với đối tượng cửa sổ mặc định.

Tôi sử dụng điều này để 'biên dịch' cài đặt cấu hình của các thành phần DOM (ví dụ: thuộc tính dữ liệu) đơn giản và nhanh chóng.

Tóm lược:

Javascript (cả trình duyệt và NodeJS) đều có JSONđối tượng tích hợp. Trên đối tượng này có 2 phương thức thuận tiện để xử lý JSON. Họ là như sau:

1. JSON.parse() Lấy JSONlàm đối số, trả về đối tượng JS
2. JSON.stringify() Đưa đối tượng JS làm đối số trả về JSONđối tượng

Các ứng dụng khác:

Bên cạnh đó để đối phó rất thuận tiện với JSONhọ có thể được sử dụng cho các phương tiện khác. Sự kết hợp của cả hai JSONphương pháp cho phép chúng ta thực hiện rất dễ dàng tạo các bản sao sâu của mảng hoặc đối tượng. Ví dụ:

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

Bạn cũng có thể sử dụng reviverchức năng để lọc.

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

Để biết thêm thông tin đọc JSON.parse.

JSON.parse là cách đúng để chuyển đổi một chuỗi thành một đối tượng nhưng nếu chuỗi được phân tích cú pháp không phải là đối tượng hoặc nếu chuỗi không đúng thì nó sẽ gây ra lỗi khiến phần còn lại của mã bị phá vỡ. lý tưởng để bọc hàm JSON.parse bên trong try-Catch như

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

Hãy thử cái này. Cái này được viết bằng bản thảo.

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

/**
 * 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;
}