Get best of the week

5 fonctionnalités peu connues de JSON.stringify ()



Bonjour mes amis!

Dans ce court article, je veux vous parler de certaines des fonctionnalités rarement utilisées de JSON.stringify (). Ils peuvent vous être utiles.

JSON.stringify () est souvent utilisé lors du débogage pour convertir un objet ou une chaîne régulière en chaîne au format JSON. Mais comment cette méthode est-elle utilisée et pouvons-nous contourner toString ()? Essayons de le faire.

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

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

[Object Object] n'est pas exactement ce que nous voulions voir, n'est-ce pas?

Ne demandez pas pourquoi nous utilisons toString (). Supposons que nous devons traduire un objet en chaîne.

Essayez maintenant d'utiliser JSON.stringify ():

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

Nous l'avons fait, Carl!

Cependant, les possibilités de JSON.stringify () ne sont pas limitées à cela.

1. Utiliser un tableau comme deuxième argument


Vous avez bien entendu, la fonction stringify peut avoir un deuxième argument. Cet argument est le tableau de clés de l'objet que nous voulons afficher dans la console. Disons que nous avons un tel tableau d'objets:

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'
    }
]

... et nous voulons voir lequel des utilisateurs est l'administrateur (l'administrateur a la propriété "access").

Si nous utilisons console.log (JSON.stringify (utilisateurs)), nous obtenons ce qui suit:

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

D'accord, pas très lisible.

Essayez maintenant ce qui suit:

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

Tellement mieux.

En toute justice, il convient de noter que dans ce cas, nous pourrions utiliser console.table (utilisateurs):



... mais nous parlons de JSON.stringify (), donc nous ne sommes pas distraits. L'exemple n'est pas très bon, mais je pense que l'idée est claire.

2. Utiliser une fonction comme deuxième argument


La fonction évalue chaque paire clé-valeur en tant que deuxième argument à filtrer selon la logique de cette fonction. Si nous renvoyons undefined, alors la paire clé-valeur correspondante n'est pas affichée. Exemple:

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. Utiliser un nombre comme troisième paramètre


Le troisième argument est responsable des espaces. Si cet argument est un nombre, alors chaque niveau de ligne aura un retrait correspondant:

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

Nous obtenons ce qui suit:

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

4. Utilisation d'une chaîne comme troisième argument


Si le troisième paramètre est une chaîne, les caractères de cette chaîne seront utilisés à la place des espaces:

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

Nous obtenons ce qui suit:

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

5. Méthode toJSON


La méthode toJSON peut être une propriété de n'importe quel objet. JSON.stringify () renvoie le résultat de cette fonction sans convertir l'intégralité de l'objet:

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

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

Prime


Outre JSON.stringify () et toJSON (), il existe également une méthode json () qui renvoie une promesse (promesse). Cette méthode est utilisée dans les requêtes du serveur.

Exemple d'utilisation:

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

Nous obtenons ce qui suit:



Merci de votre attention.

Bon codage!

More articles:


All Articles