【JavaScript】注意JSON.stringify的使用，特別是「空欄位」

重點

• 若用stringify來「壓扁」資料，要注意key為undefined的欄位，會「不見」
• 不見有什麼問題？
  • 後端找不到相對應的key，解析出來就會壞掉
  • 原有的資料結構會「失真」
• 比較好的解法
  1. key在壓扁之前，檢查並賦予「空字串」
  2. 欄位的default值給予空字串或是null

實作

const formData = {
	name: undefined,
	email: 'abc@ccc.com',
	meta: {
		descp: undefined,
		avatarUrl: 'https://aaa.jpg'
	}
}

JSON.stringify(formData);
// '{"email":"abc@ccc.com","meta":{"avatarUrl":"https://aaa.jpg"}}'

將undefined改為null

const formData = {
	name: null,
	email: 'abc@ccc.com',
	meta: {
		descp: null,
		avatarUrl: 'https://aaa.jpg'
	}
}

JSON.stringify(formData);
// '{"name":null,"email":"abc@ccc.com","meta":{"descp":null,"avatarUrl":"https://aaa.jpg"}}'

---

REF

• https://javascript.plainenglish.io/i-almost-lost-my-year-end-bonus-because-of-json-stringify-5ca73bb840ca