Get best of the week

5 recursos pouco conhecidos do JSON.stringify ()



Bom dia amigos

Neste breve artigo, quero falar sobre alguns dos recursos raramente usados ​​do JSON.stringify (). Eles podem ser úteis para você.

JSON.stringify () é frequentemente usado durante a depuração para converter um objeto ou sequência regular em uma sequência no formato JSON. Mas como esse método é usado, e podemos contornar toString ()? Vamos tentar fazer isso.

//   user
const user = {
    name: 'Harry Heman',
    age: 29,
    job: 'developer'
}

//    ,    toString(),     
console.log(user.toString()) // [object Object]

[objeto Objeto] não é exatamente o que queríamos ver, é?

Não pergunte por que usamos toString (). Suponha que precisamos converter um objeto em uma string.

Agora tente usar JSON.stringify ():

console.log(JSON.stringify(user)) // {"name":"Harry Heman","age":29, "job": "developer"}

Nós conseguimos, Carl!

No entanto, as possibilidades de JSON.stringify () não se limitam a isso.

1. Usando uma matriz como segundo argumento


Você ouviu direito, a função stringify pode ter um segundo argumento. Este argumento é a matriz de chaves do objeto que queremos exibir no console. Digamos que temos uma variedade de objetos:

let users = [
    {
        id: 1,
        login: 'harry',
        password: 'qwerty',
        status: 'admin',
        access: true
    },
    {
        id: 2,
        login: 'alice',
        password: 'qwerty',
        status: 'user'
    },
    {
        id: 3,
        login: 'bob',
        password: 'qwerty',
        status: 'user'
    },
    {
        id: 4,
        login: 'john',
        password: 'qwerty',
        status: 'user'
    },
    {
        id: 5,
        login: 'jane',
        password: 'qwerty',
        status: 'user'
    }
]

... e queremos ver qual dos usuários é o administrador (o administrador tem a propriedade "acessar").

Se usarmos console.log (JSON.stringify (users)), obteremos o seguinte:

[{"id":1,"login":"harry","password":"qwerty","status":"admin", "access": true},{"id":2,"login":"alice","password":"qwerty","status":"user"},{"id":3,"login":"bob","password":"qwerty","status":"user"},{"id":4,"login":"john","password":"qwerty","status":"user"},{"id":5,"login":"jane","password":"qwerty","status":"user"}]

Concordo, não muito legível.

Agora tente o seguinte:

console.log(JSON.stringify(users, ['id', 'access'])) // [{"id":1,"access":true},{"id":2},{"id":3},{"id":4},{"id":5}]

Muito melhor.

Para ser sincero, deve-se notar que, neste caso, poderíamos usar console.table (users):



... mas estamos falando sobre JSON.stringify (), portanto não estamos distraídos. O exemplo não é muito bom, mas acho que a ideia é clara.

2. Usando uma função como segundo argumento


A função avalia cada par de valores-chave como o segundo argumento a ser especificado de acordo com a lógica dessa função. Se retornarmos indefinidos, o par de valores-chave correspondente não será exibido. Exemplo:

const result = JSON.stringify(users, (key, value) => {
    if (typeof value === 'string') return undefined

    return value
})

console.log(result) // [{"id":1,"access":true},{"id":2},{"id":3},{"id":4},{"id":5}]

3. Usando um número como terceiro parâmetro


O terceiro argumento é responsável por espaços. Se esse argumento for um número, cada nível de linha terá um recuo correspondente:

console.log(JSON.stringify(user, null, 2))

Temos o seguinte:

{
  "name": "Harry Heman",
  "age": 29,
  "job": "developer"
}

4. Usando uma string como terceiro argumento


Se o terceiro parâmetro for uma sequência, os caracteres dessa sequência serão usados ​​em vez de espaços:

console.log(JSON.stringify(user, null, '->'))

Temos o seguinte:

{
->"name": "Harry Heman",
->"age": 29,
->"job": "developer"
}

5. método toJSON


O método toJSON pode ser uma propriedade de qualquer objeto. JSON.stringify () retorna o resultado dessa função sem converter o objeto inteiro:

const user = {
    first: 'Harry',
    last: 'Heman',
    age: 29,
    toJSON(){
        return {
            full: `${this.first} ${this.last}`
        }
    }
}

console.log(JSON.stringify(user)) // "full": "Harry Heman"

Bônus


Além de JSON.stringify () e toJSON (), também há um método json () que retorna uma promessa (promessa). Este método é usado em solicitações do servidor.

Exemplo de uso:

const url = 'https://jsonplaceholder.typicode.com/users'

asyncAwaitFetch()
async function asyncAwaitFetch(){
    try {
        const response = await fetch(url)
        const data = await response.json()
        console.table(data)
    } catch (error){
        console.error(error)
    } finally {
        console.log('')
    }
}

Temos o seguinte:



Agradecemos sua atenção.

Feliz codificação!

More articles:


All Articles