0

quiero leer un archivo json (objeto que contiene array de objetos con array de objetos) quiero acceder a las propiedades "producto" y "precio", el archivo ya lo puse en mi carpeta htdocs de xampp en la misma carpeta del proyecto. uso una funcion "async" para la solicitud HTTP del archivo pero cuando ejecuto el archivo index (que tiene tambien el script no lee mi archivo).

{
    "limpieza":[
        {"hoja":[
            {"precio":"148","producto":"Cloro"},
            {"precio":"79","producto":"Salvo"},
            {"precio":"79","producto":"Maestro Limpio"},
            {"precio":"79","producto":"Blanqueador"},
            {"precio":"","producto":""}
        ]},
        {"hoja":[
            {"precio":"148","producto":"Desinfectante"},
            {"precio":"178","producto":"Jabon"},
            {"precio":"225","producto":"Pino"},
            {"precio":"79","producto":"Cepillo"},
            {"precio":"208","producto":"Escoba"}
        ]},
        {"hoja":[
            {"precio":"2","producto":"Recogedor"},
            {"precio":"148","producto":"Bolsas para la basura"},
            {"precio":"79","producto":"Cesto de basura"},
            {"precio":"79","producto":"Jergas"},
            {"precio":"","producto":""}
        ]}
    ]
}

dejo el codigo javascript. ya lo he provado con esta liga ejemplo 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json' y funciona pero cuando lo hago de forma local javascript me manda el siguiente error: Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data y no logro dar con el supuesto caracter esperado en el archivo JSON. ya pase el archivo json por un comprobador de sintaxis y me dice que todo esta bien. no entiendo el error de javascript.ya he probado ejecutando el script en un archivo separado al index, ya he probado haciendo todo en una sola funcion, ya he probado la sintaxis de mi json

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">

    <title></title>
    <!--<script src="leerjson2.js"></script>-->
    <!--<link href="" rel="">
    <link rel="" href="">-->
  </head>

  <body>

      <header>
      </header>

      <section>
      </section>

  </body>

  <script>

async function JSON(){
    
    const solicitudURL = 'localhost/leer-JSON/lista.json';
    const solicitud = new Request(solicitudURL);

    const respuesta = await fetch(solicitud);
    const listadoJSON = await respuesta.json();

    HTML(listadoJSON);
    
}

function HTML(json){
    const sectionHTML = document.querySelector('section');
    const miH1 = document.createElement('h1');
    miH1.textContent = json.squadName;
    sectionHTML.appendChild(miH1);
}

JSON();

  </script>
</html>
3
  • A mi me trae bien los datos, intenta poniendo './' antes de la ruta del archivo json. por cierto que es squadname? no existe ninguna propiedad asi en el archivo el 10 ene. 2023 a las 22:42
  • una disculpa, puse esa parte de "squadname" mal. es que es para hacer la prueba con el otro archivo JSON de la liga de github que coloque en la pregunta. en si seria: "miH1.textContent = json.limpieza", no ? ya probe colocando la ruta con './' pero aun nada.
    – gera98k
    el 10 ene. 2023 a las 23:08
  • ahi te respondi @gera98k el 10 ene. 2023 a las 23:08

1 respuesta 1

0

Si en el mismo directorio del index.html tenes la carpeta leer-JSON y dentro el archivo, entonces deberia funcionarte bien, si queres acceder a las propiedades producto y precio proba haciendo lo siguiente:

<!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>Document</title>
</head>
<body>
  
  <header></header>
  <section></section>
  <script src="scripts2.js" type="text/javascript" defer></script>
</body>
</html>

en JS (en un archivo separado en el directorio raiz)

async function JSON(){ 
    const solicitudURL = './leer-JSON/lista.json';
    const solicitud = new Request(solicitudURL);
    const respuesta = await fetch(solicitud);
    const listadoJSON = await respuesta.json();
    HTML(listadoJSON); 
}

function HTML(json){
  const sectionHTML = document.querySelector('section');
  const miH1 = document.createElement('h1');
  console.log(json)
    for(entry of json.limpieza){
      let hoja = entry.hoja
      for(let i = 0; i < hoja.length; i++){
        console.log(hoja[i].precio)
        console.log(hoja[i].producto)
      }
    }
  sectionHTML.appendChild(miH1);
}

JSON();

Solo estoy imprimiendo las propiedades en la consola, después vos ya podes hacer lo que quieras con esos datos. Uso Live Server en VsCode que me crea un servidor en el puerto 3000.

2
  • Gracias hermano, me ayudaste un monton! Saludos Revisando todo note que el error que me indicaba no tenia nada que ver con el archivo JSON si no con el valor pasado como string en la linea para la URL de la solicitud HTTP en la funcion async. no lo acepta de las formas: 'localhost/leer-JSON/lista.json' , '/localhost/leer-JSON/lista.json' y 'leer-JSON/lista.json'
    – gera98k
    el 11 ene. 2023 a las 0:34
  • si usas vscode te recomiendo instalar la extension 'Path Intellisense', a la hora de poner rutas cuando pones entre comillas './' automaticamente sale una ventana para que elijas la carpeta destino, con el directorio raiz (donde esta el fichero js) como base. Saludos. el 11 ene. 2023 a las 0:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.