5 características poco conocidas de JSON.stringify ()



¡Buen dia amigos!

En este breve artículo, quiero contarles sobre algunas de las características poco utilizadas de JSON.stringify (). Pueden ser útiles para usted.

JSON.stringify () se usa a menudo durante la depuración para convertir un objeto o una cadena normal en una cadena en formato JSON. Pero, ¿cómo se usa este método, y podemos pasar a toString ()? Intentemos hacerlo.

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

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

[objeto Objeto] no es exactamente lo que queríamos ver, ¿verdad?

No pregunte por qué usamos toString () en absoluto. Supongamos que necesitamos traducir un objeto en una cadena.

Ahora intente usar JSON.stringify ():

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

¡Lo hicimos, Carl!

Sin embargo, las posibilidades de JSON.stringify () no se limitan a esto.

1. Usando una matriz como segundo argumento


Has oído bien, la función stringify puede tener un segundo argumento. Este argumento es la matriz de claves del objeto que queremos mostrar en la consola. Digamos que tenemos una gran variedad 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'
    }
]

... y queremos ver cuál de los usuarios es el administrador (el administrador tiene la propiedad "acceso").

Si usamos console.log (JSON.stringify (usuarios)), obtenemos lo siguiente:

[{"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"}]

De acuerdo, no muy legible.

Ahora intente lo siguiente:

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

Mucho mejor.

Para ser justos, debe tenerse en cuenta que en este caso podríamos usar console.table (users):



... pero estamos hablando de JSON.stringify (), por lo que no estamos distraídos. El ejemplo no es muy bueno, pero creo que la idea es clara.

2. Usando una función como segundo argumento


La función evalúa cada par clave-valor como el segundo argumento para stringificar de acuerdo con la lógica de esta función. Si volvemos indefinido, no se muestra el par clave-valor correspondiente. Ejemplo:

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 un número como el tercer parámetro


El tercer argumento es responsable de los espacios. Si este argumento es un número, entonces cada nivel de línea tendrá una sangría correspondiente:

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

Obtenemos lo siguiente:

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

4. Usando una cadena como el tercer argumento


Si el tercer parámetro es una cadena, se usarán los caracteres de esta cadena en lugar de espacios:

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

Obtenemos lo siguiente:

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

5. método toJSON


El método toJSON puede ser una propiedad de cualquier objeto. JSON.stringify () devuelve el resultado de esta función sin convertir todo el objeto:

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

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

Prima


Además de JSON.stringify () y toJSON (), también hay un método json () que devuelve una promesa (promesa). Este método se usa en las solicitudes del servidor.

Ejemplo 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('')
    }
}

Recibimos lo siguiente:



Gracias por su atención.

¡Feliz codificación!

All Articles