Maison >interface Web >js tutoriel >Comment puis-je lire les données d'un fichier JSON local à l'aide de JavaScript ?

Comment puis-je lire les données d'un fichier JSON local à l'aide de JavaScript ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-22 05:26:14598parcourir

How Can I Read Data from a Local JSON File Using JavaScript?

Lecture de fichiers JSON locaux externes en JavaScript

Pour accéder aux données d'un fichier JSON local externe en JavaScript, suivez ces étapes :

Créer un fichier JSON :

  • Enregistrer le Données JSON dans un fichier local, par exemple test.json avec le contenu suivant :
{
  "resource": "A",
  "literals": ["B", "C", "D"]
}

Code JavaScript :

Une fois le fichier JSON créé , écrivez un script JavaScript pour le lire :

// Step 1: Get JSON file path
const filePath = "/Users/Documents/workspace/test.json";

// Step 2: Create XMLHttpRequest object
const xhr = new XMLHttpRequest();

// Step 3: Open and send request
xhr.open("GET", filePath);
xhr.send();

// Step 4: Handle response
xhr.onload = function() {
  if (xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);

    // Step 5: Access JSON data
    console.log(response.resource); // Output: "A"
    console.log(response.literals); // Output: ["B", "C", "D"]
  } else {
    console.error(`Error: ${xhr.status} - ${xhr.statusText}`);
  }
};

Exemple Utilisation :

Pour utiliser ce code, incluez à la fois le fichier test.json et le script JavaScript dans votre document HTML :

<script src="/Users/Documents/workspace/test.json"></script>
<script src="script.js"></script>

Ce code établit une requête HTTP GET asynchrone pour le fichier JSON, récupère la réponse, l'analyse en JSON et imprime les données pertinentes sur la console.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn