Quartz 🪬

JSON to Object in JavaScript

3 min read

parse

Để có thể chuyển chuỗi JSON sang object, ta sử dụng phương thức parse() của lớp đối tượng JSON.

Cú pháp như sau:

// json is mandatory
// reviver is an optional callback function
JSON.parse(json, reviver)

Ví dụ:

const usersText = `{
	"users":[
		{
			"firstName":"Asabeneh",
			"lastName":"Yetayeh",
			"age":250,
			"email":"asab@asb.com"
		},
		{
			"firstName":"Alex",
			"lastName":"James",
			"age":25,
			"email":"alex@alex.com"
		},
		{
			"firstName":"Lidiya",
			"lastName":"Tekle",
			"age":28,
			"email":"lidiya@lidiya.com"
		}
	]
}`
 
const usersObj = JSON.parse(usersText)
 
console.log(usersObj) // {users: Array(3)}

reviver

Trong số các tham số của parse có một tham số gọi là reviver. Tham số này là một callback, thường dùng để format dữ liệu.

Tham số của reviver là:

  • key là thuộc tính muốn format.
  • value là giá trị của thuộc tính đó.

Note

Tham số key và value sẽ nhận vào cặp key-value của mọi đối tượng có trong JSON.

Chẳng hạn ta muốn viết hoa firstName và lastName:

const usersText = `{
	"users":[
		{
			"firstName":"Asabeneh",
			"lastName":"Yetayeh",
			"age":250,
			"email":"asab@asb.com"
		},
		{
			"firstName":"Alex",
			"lastName":"James",
			"age":25,
			"email":"alex@alex.com"
		},
		{
			"firstName":"Lidiya",
			"lastName":"Tekle",
			"age":28,
			"email":"lidiya@lidiya.com"
		}
	]
	}`
 
const usersObj = JSON.parse(usersText, function (key, value) {
  let newValue = typeof value == "string" && key != "email" ? value.toUpperCase() : value
 
  return newValue
})
 
console.log(usersObj.users[0]) // {firstName: 'ASABENEH', lastName: 'YETAYEH', age: 250, email: 'asab@asb.com'}

Attention

Nếu reviver trả về undefined thì thuộc tính đang xét sẽ bị xóa khỏi object.

Ví dụ:

const jsonObject = JSON.parse('{"1": 1, "2": 2, "3": 3, "4": 4, "5": 5}', (key, value) => {
  if (value != 5) return value
})
 
console.log(jsonObject) // {1: 1, 2: 2, 3: 3, 4: 4}

Áp dụng đối với mảng:

const jsonObject = JSON.parse("[1, 2, 3, 4, 5]", (key, value) => {
  if (value !== 5) return value
})
 
console.log(jsonObject) // [1, 2, 3, 4, undefined]

Warning

Lưu ý rằng, callback sẽ được gọi thêm một lần sau khi duyệt qua tất cả các giá trị. Ở lần gọi này, giá trị của value sẽ là kết quả sau khi chỉnh sửa bởi reviver.

Do đó, nếu trả về undefined ở lần gọi này thì giá trị của parse cũng sẽ là undefined.

Cụ thể như sau:

const jsonObject = JSON.parse("[1, 2, 3, 4, 5]", (key, value) => {
  console.log(value) // 1 2 3 4 5 [1, 2, 3, 4, undefined]
 
  if (value < 5) return value
})
 
console.log(jsonObject) // undefined

Ở lần lặp cuối trong ví dụ trên, giá trị của value là mảng [1, 2, 3, 4, undefined], khi so sánh với 5 thì sẽ cho ra kết quả là false:

console.log([1, 2, 3, 4, undefined] < 5) // false

Do đó, câu lệnh return value sẽ không được thực thi, dẫn đến, hàm parse không trả về giá trị gì cả. Kết quả, biến jsonObject có giá trị là undefined.

Important

Khi gặp một key, hàm parse sẽ xét giá trị của key đó có phải là object không. Nếu phải, key đó sẽ không được xử lý bằng reviver ngay lập tức mà thay vào đó sẽ xét tiếp vào các object con lồng ở bên trong.

Xét ví dụ sau:

JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', (key, value) => {
  console.log(key) // 1 2 4 6 5 3 ""
  return value
})

Backlinks