Chuyển đổi chuỗi JSON ở phía máy khách và máy chủ là một yêu cầu quan trọng trong việc xử lý dữ liệu. Hầu hết các ngôn ngữ lập trình đều chứa các hàm gốc để xử lý các đối tượng JSON và dữ liệu chuỗi.
Định dạng JSON là một cách thuận tiện để cấu trúc, truyền hoặc ghi dữ liệu phân cấp. Chuỗi JSON là một đơn vị được đóng gói để truyền các thuộc tính đối tượng qua các thiết bị đầu cuối API.
Trong hướng dẫn này, chúng ta sẽ thấy cách chuyển đổi một đối tượng JavaScript thành một chuỗi JSON. JSON.stringify () của tập lệnh JS được sử dụng để thực hiện việc này. Đây là một giải pháp nhanh chóng để chuyển đổi đối tượng JS đã cho thành JSON.
Mục lục
Ví dụ nhanh
var jsObject = {
"name": "Lion",
"type": "wild"
};
var jsonString = JSON.stringify(jsObject)
console.log(jsonString);
Đầu ra
{"name":"Lion","type":"wild"}
Giới thiệu về JavaScript JSON.stringify ()
Phương thức JSON.stringify () chấp nhận 3 tham số để chuyển đổi các đối tượng JavaScript thành chuỗi JSON. Xem cú pháp và các tham số có thể có của phương thức JavaScript này.
Cú pháp
JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)
Các tham số thay thế và không gian là tùy chọn.
- giá trị – Đối tượng JS được chuyển đổi thành chuỗi JSON.
- người thay thế – một hàm hoặc một mảng các đặc tả để chuyển đổi các đối tượng JavaScript.
- không gian – Nó là một đặc điểm kỹ thuật được sử dụng để định dạng hoặc kiểm tra trước JSON đầu ra.
Phương thức JSON.stringify () cũng có thể chấp nhận các mảng JavaScript để chuyển đổi thành các chuỗi JSON.
Cách lấy chuỗi JSON được định dạng từ một đối tượng JavaScript
Ví dụ này cung cấp tham số “space” cho phương thức JSON.stringify. Tham số này đã giúp định dạng chuỗi JSON như được hiển thị trong đầu ra bên dưới chương trình.
Khi chúng ta thấy ví dụ chuyển đổi mảng PHP sang JSON, nó đã sử dụng tham số bitmask PHP để đạt được bản in đẹp của đầu ra JSON.
var jsObject = {
"name": "Lion",
"type": "wild"
};
// this is to convert a JS object to a formatted JSON string
var formattedJSON = JSON.stringify(jsObject, null, 2);
console.log(formattedJSON);
Đầu ra
{
"name": "Lion",
"type": "wild"
}
Cách lưu chuỗi JSON vào một JavaScript localStorage
LocalStorage là một cơ chế để có dữ liệu hoặc trạng thái liên tục ở phía máy khách. Nó chấp nhận dữ liệu chuỗi được lưu trữ với một tham chiếu của khóa do người dùng xác định.
Trong ví dụ này, chúng tôi đã sử dụng công cụ lưu trữ này để giữ chuỗi JSON của dữ liệu phiên giỏ hàng.
Mã này đẩy hai bản ghi vào mảng giỏ hàng. Sau đó, nó chuyển đổi mảng thành chuỗi JSON để đưa nó vào localStorage.
Ghi chú: JSON.stringify () cũng có thể chấp nhận mảng để chuyển đổi thành chuỗi JSON.
Chúng tôi đã sử dụng cơ chế lưu trữ này để tạo giỏ hàng liên tục JavaScript.
const cart = {
cartItem: []
};
cart.cartItem.push({ product: "Watch", quantity: 3, unitPrice: 100 });
cart.cartItem.push({ product: "Smart Phone", quantity: 5, unitPrice: 600 });
// use case for converting JS object to a JSON string
// convert object to JSON string before storing in local storage
const cartJSONString = JSON.stringify(cart);
localStorage.setItem("cartSession", JSON.stringify(cartJSONString));
// retrieving from local storage
let cartFromStorage = localStorage.getItem("cartSession");
const getCartItemFromSession = JSON.parse(cartFromStorage);
console.log(getCartItemFromSession);
Đầu ra
{
"cartItem":
[
{"product":"Watch","quantity":3,"unitPrice":100},
{"product":"Smart Phone","quantity":5,"unitPrice":600}
]
}
Cách ngày tháng trong đối tượng JavaScript hoạt động trong quá trình chuỗi JSON
Hàm JSON.stringify () chuyển đổi đối tượng Ngày JavaScript thành một chuỗi ngày tương đương như được hiển thị trong đầu ra.
Mã khởi tạo lớp JavaScript Date () để đặt ngày hiện tại thành thuộc tính đối tượng JS.
// when you convert a JS object to JSON string, date gets automatically converted
// to equivalent string form
var jsObject = {
"name": "Lion",
"type": "wild",
today: new Date()
};
const jsonString = JSON.stringify(jsObject);
console.log(jsonString);
Đầu ra
{"name":"Lion","type":"wild","today":"2022-10-23T10:58:55.791Z"}
Cách JSON stringify chuyển đổi các đối tượng JavaScript bằng các hàm
Nếu đối tượng JS chứa các hàm dưới dạng giá trị của một thuộc tính, thì JSON.stringify sẽ bỏ qua hàm. Sau đó, nó sẽ không trả lại gì cho tài sản cụ thể đó.
Chuỗi JSON kết quả sẽ có phần còn lại của các thuộc tính có ánh xạ hợp lệ.
// when you convert a JS object to JSON string,
// functions in JS object is removed by JSON.stringify
var jsObject = {
"name": "Lion",
"type": "wild",
age: function() {
return 10;
}
};
const jsonString = JSON.stringify(jsObject);
console.log(jsonString);
Đầu ra
{"name":"Lion","type":"wild"}
JavaScript toString () hạn chế đối với JSON.stringify:
Nếu đối tượng JavaScript đầu vào chứa một hoặc có cấu trúc có thể dự đoán được, toString () có thể đạt được chuyển đổi này.
Nó được thực hiện bằng cách lặp lại mảng đối tượng JS và áp dụng chuỗi ký tự trên mỗi lần lặp. Thí dụ,
let jsonString = {
'name': 'Lion',
type: 'wild',
toString() {
return '{name: "${this.name}", age: ${this.type}}';
}
};
console.log(jsonString);
Tuy nhiên, nó không phải là một cách hiệu quả có xác suất thiếu một số thuộc tính trong quá trình lặp.
Tại sao và cách chuyển đổi chuỗi JSON thành một đối tượng JSON
Chuỗi JSON là một định dạng thoải mái trong quá trình truyền dữ liệu và ghi dữ liệu. Ngoài ra, nó phải ở định dạng cây đối tượng để phân tích cú pháp, đọc từ và ghi vào JSON.
Phương thức JSON.parse () được sử dụng để chuyển đổi Chuỗi JSON thành Đối tượng JSON. Một đối tượng JSON sẽ chỉ giống như một đối tượng JS. Xem so sánh sau đây giữa một đối tượng JS và một đối tượng JSON.
//JavaScript object
const jsObject = {
'animal-name': 'Lion',
animalType: 'wild',
endangered: false
}
//JSON object
{
"animal-name": "Lion",
"animalType": "wild",
"endangered": false
}
Tải xuống