Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

96
Vistas
Fetching JSON not working in site but working in localhost

Json fetching has worked before in site for example here where i used the same processes - https://n-ce.github.io/Sea-arch

Here's the script

//FETCH
function content(a){
fetch(a+'.json').then(function (response) {
      return response.json();
    }).then(function (data) {
      appendData(data);
    }).catch(function (err) {
      console.log('error: ' + err);
    });
}

//Loading the objects
var root = document.getElementById('root');
function appendData(data) {
  for (var i = 0; i < data.length; i++) {
    var p = document.createElement("p");
    p.innerHTML = data[i].Name;
    root.appendChild(p);
  } 
}


// Remove Function

function remove(){
  while (root.hasChildNodes()) {
    root.removeChild(root.firstChild);
  }
}

// Click decision making

var count = couns = 0;

function Sites() {
  if(count%2==0){
    content('Sites');
    count++;
  }
  else{
    count--;
    remove();
  }
}
function Animals() {
  if (couns % 2 == 0) {
    content('Animals');
    couns++;
  }
  else {
    couns--;
    remove();
  }
}

And this is the HTML


<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON SD</title>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body onload="content('Onload')">
    <span>
      <button onclick="Animals()">Load Animals</button>
      <button onclick="Sites()">Load Sites</button>
    </span>
    <div id="root"></div>
    <script src="script.js"></script>
  </body>
</html>

There is no way for me to debug this given that the console doesnot throw any errors since its working fine in localhost. Im fairly new to the Fetch API But Im thinking maybe it is because the json files are being transferred are taking too long? Can someone please highlight whats the issue?

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Here's how it worked for github pages, thanks to @programmarRaj for highlighting Script

//FETCH
function content(a){
fetch("./"+a+".json").then(function (response) {
      return response.json();
    }).then(function (data) {
      appendData(data);
    }).catch(function (err) {
      console.log('error: ' + err);
    });
}
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.