accès JavaScript JSON locaux

Question

Je dispose d'un fichier JSON avec des données Mock:

{ 
 
    "name": "Harvey Specter", 
 
    "location": "New York, USA", 
 
    "picture": "", 
 
    "likes": 121, 
 
    "following": 723, 
 
    "followers": 4433, 
 
    "comments": [ 
 
    { 
 
     "id": 0, 
 
     "author": { 
 
     "picture": "", 
 
     "name": "Mike Ross" 
 
     }, 
 
     "date": "", 
 
     "body": "" 
 
    }, 
 
    { 
 
     "id": 1, 
 
     "author": { 
 
     "picture": "", 
 
     "name": "Rachel Zein" 
 
     }, 
 
     "date": "", 
 
     "body": "" 
 
    }, 
 
    { 
 
     "id": 2, 
 
     "author": { 
 
     "picture": "", 
 
     "name": "Louis Litt" 
 
     }, 
 
     "date": "", 
 
     "body": "" 
 
    } 
 
    ] 
 
}

Comment ça puis-je accéder par javascript, et afficher les données dans mon SPA React? En outre, j'aimerais pouvoir modifier les données, c'est-à-dire, si je clique sur le bouton 'suivre', cela augmente les suiveurs dans JSON.

Answer 1

How do I access it through javascript, and display the data in my React SPA?

Vous pouvez faire un request en utilisant la méthode fetch afin d'obtenir le data à partir de votre fichier.

fetch("data.json") 
    .then((response) => { 
     return response; 
    }).then((json) => { 
     //do whatever 
    }); 

ou une demande javascript native en utilisant XMLHttpRequest.

Si vous voulez lire le fichier local. utilisez la déclaration require.

var data = require('../../data.json'); 
for(var i = 0; i < data.length; i++) { 
    //iterate data 

Vous pouvez afficher data en utilisant la fonction render lorsque le composant React est initialisé.

Also, I would like to be able to change the data i.e. if I click the 'follow' button it increments followers in JSON.

Vous pouvez modifier l'objet array à l'aide javascript.

obj["followers"]=parseInt(obj["followers"])+1 

puis enregistrez nouvel objet à server-side en utilisant la méthode fetch.

Answer 2

Pour des fins de développement, vous pouvez simplement ajouter les données comme une variable régulière comme ceci:

var myData = JSON.parse({ "data" : "test test test" }); 

Si vous voulez similate à l'aide d'une API, vous pouvez alors faire une fonction renvoyant une promesse comme ceci:

function getData() { return Promise.resolve(myData) } 

Ensuite, vous pouvez consommer presque comme un appel API (encapsulé), comme suit:

getData() 
    .then(resolvedData => console.log('my data is', resolvedData) 

Answer 3

Créer l'objet comme ceci:

let objRef = {name: "Harvey Specter" 
      ,location: "New York, USA" 
       ,picture: "" 
       ,likes: 121 
      ,following: 723 
      ,followers: 4433 
      ,comments:[{id: 0 
        ,author: {picture: "" 
           ,name: "Mike Ross" } 
         ,date: "" 
         ,body: "" } 
         ,{id: 1 
        ,author: {picture: "" 
           ,name: "Rachel Zein" } 
         ,date: "" 
         ,body: "" } 
         ,{id: 2 
        ,author: {picture: "" 
           ,name: "Louis Litt" } 
         ,date: "" 
         ,body: "" }]}; 

Quelques exemples sur la façon de faire référence:

alert(objRef["name"]); 

    alert(objRef["comments"][0]["author"]["name"]); 

Answer 4

Pour ce faire, vous aurez besoin d'une course back-end, ce qui fait tous les tranfsforms sur les données. Il y a quelques raisons très convaincantes de le faire.

Tout d'abord, sécurité. Je ne voudrais pas qu'un site Web télécharge simplement des fichiers de mon PC et encore moins qu'ils enregistrent des fichiers sur mes disques sans mon consentement explicite.

En second lieu, si tous vos utilisateurs avaient une copie locale de ce fichier, comment seraient-ils maintenant de tout changement fait à votre dossier?

Vous aurez donc besoin d'un backend qui conserve ces données, de préférence dans une base de données. Parce que c'est plus rapide que tout stockage de données basé sur des fichiers. Maintenant que vous avez des options, mais vu que vous faites un projet basé sur javascript, je vous conseille d'utiliser node.js, qui est javascript fonctionnant sur un serveur. Pour une base de données, si vos données ne seront pas plus avancées, vous pouvez opter pour un mongo simple, utilisez mongoose pour faciliter l'accès. Ou si vous avez besoin de plus de mappage relationnel, vous pouvez choisir de travailler avec postgres. Et vous pourriez obtenir toutes vos transitions via une API REST, en utilisant par exemple loopback. Ou vous pouvez choisir de le faire en temps réel en utilisant les websockets et d'utiliser la bibliothèque socket.io

Mais avoir une application côté client pour faire des transformations de fichiers est hors de question.