¿Hay alguna manera de manipular y mostrar los datos en el archivo sin usar la función de búsqueda? Además, ¿puedo almacenar el archivo json en una variable e iterarlo? Parece que para un archivo local habría un método más simple de trabajar con/mostrar los datos...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href ="styles.css"> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <script src="main.js"></script> <script src="animals.json"></script> <!-- added json file--> </head> <body> <div class ="sampleDiv"></div> </div> </body> </html>archivo json
[ { "name": "Whiskers", "species" : "cat", "foods": { "likes": ["celery", "strawberries"], "dislikes": ["carrots"] } }, { "name": "Woof", "species" : "dog", "foods": { "likes": ["dog food"], "dislikes": ["cat food"] } }, { "name": "Fluffy", "species" : "cat", "foods": { "likes": ["canned food"], "dislikes": ["dry food"] } } ]Los elementos <script> son para cargar JavaScript, no JSON.
<script src="animals.json"></script> solo hará que el navegador arroje un error CORB cuando no obtenga el tipo de contenido que espera.
Utilice la API de fetch para cargar el JSON en su lugar.
fetch("animals.json") .then(response => response.json()) .then(data => { // Work with your data here });Sí, puede simplemente colocar el archivo JSON en un archivo js con parsing const yourJSON = JSON.parse(/*paste your entire JSON*/) y luego agregue el archivo js en la etiqueta del script para que pueda acceder a su variable JSON en los otros archivos js .
No puede cargar archivos .json como scripts. Necesitará código JavaScript y una solicitud HTTP para cargarlo. Esto se puede hacer fácilmente con fetch() , pero si solo está buscando una alternativa, puede usar $.getJSON de jQuery:
$.getJSON('animals.json', function(obj) { document.getElementsByClassName('sampleDiv')[0].innerHTML = JSON.stringify(obj); }); En mi opinión, la forma más elegante de hacerlo es con fetch() . Volcar todo el json en el código JavaScript y usar JSON.parse hace que todo sea extremadamente imposible de mantener y usar jQuery también es excesivo.