Question posted in
You can find the official documentation here.

404 ERROR when I try to GET data from google spreadsheet – Jquery ajax

Hy everyone, I don’t know if exit someone who can help me.

I don’t know how it is possible, few days ago all ok now it stop to work.
Basically I read data in a html table on a website from a google spreadsheet public on website and public to everyone with the link. Using ajax.

Until now it worked, i saw all the datas and voices presents on my sheet in google drive, now it stop to show the datas and return an anonymous error like if the link to my google spreadsheet is inexistent, but it is here!!

For example on this googlesheet: https://docs.google.com/spreadsheets/d/13KmAf2uc13fWxPvn8dtk9j9kOL3nCVqi8H-wYau6Tww/edit?usp=sharing

I Have a series of data to display on my html website. Until few days ago it worked, now no.

I used jquery google : src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">

I public my code below:

<script>
$.getJSON("https://spreadsheets.google.com/feeds/list/13KmAf2uc13fWxPvn8dtk9j9kOL3nCVqi8H-wYau6Tww/od6/public/values?alt=json", function (data) {
  var sheetData = data.feed.entry;
  var i;
  for (i = 0; i < sheetData.length; i++) {
    var nome = data.feed.entry[i]['gsx$_cn6ca']['$t'];
    var ingredienti = data.feed.entry[i]['gsx$_cokwr']['$t'];
    var prezzo = data.feed.entry[i]['gsx$_cpzh4']['$t'];
    document.getElementById('Vinorosato').innerHTML += ('<div class="Teglie menu-restaurant">'+'<span class="clearfix">'+'<a class="menu-title" style="padding-right: 50px;">'+nome+'</a>'+'<span class="menu-price">'+prezzo+'</span>'+'</span>'+'<span class="menu-subtitle" style="padding-right: 100px;">'+ingredienti+'</span>'+'</div>');
  }
});

enter image description here

Tags:

2

Answers


  1. 0

    Try this code that doesn’t require jQuery

    <html><body>
<script>

function reqListener () {
  var jsonString = this.responseText.match(/(?<="table":).*(?=});)/g)[0];
  var json = JSON.parse(jsonString);
  var table = '<table>'
  for (var i=0;i<json.rows.length;i++){
    var nome = json.rows[i].c[0].v;
    var ingredienti = json.rows[i].c[1].v;
    var prezzo = json.rows[i].c[2].v;
    table += '<tr><td>' + nome + '</td><td>' + ingredienti + '</td><td>' + prezzo + '&nbsp;&euro;</td></tr>'
  }
  table += '</table>'
  document.getElementById("Vinorosato").innerHTML = table;
}

var id = '13KmAf2uc13fWxPvn8dtk9j9kOL3nCVqi8H-wYau6Tww';
var gid = '0';
var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", url, true);
oReq.send();
 
</script>
<div id="Vinorosato">&nbsp;</div></body></html>

    and adapt with your own style

    Login or Signup to reply.
  2. 0

    Another solution without ajax and jQuery, using fetch https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

    <html><body>

<script>
var id = '13KmAf2uc13fWxPvn8dtk9j9kOL3nCVqi8H-wYau6Tww';
var gid = '0';
var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
fetch(url)
  .then(response => response.text())
  .then(data => document.getElementById("Vinorosato").innerHTML=myItems(data.match(/(?<="table":).*(?=});)/g)[0]) 
  );
function myItems(jsonString){
  var json = JSON.parse(jsonString);
  var table = '<table>'
  for (var i=0;i<json.rows.length;i++){
    var nome = json.rows[i].c[0].v;
    var ingredienti = json.rows[i].c[1].v;
    var prezzo = json.rows[i].c[2].v;
    table += '<tr><td>' + nome + '</td><td>' + ingredienti + '</td><td>' + prezzo + '&nbsp;&euro;</td></tr>'
  }
  table += '</table>'
  return table
}
</script>

<div id="Vinorosato">List ...</div>

</body></html>

    https://codepen.io/mikesteelson/pen/YzQKere
    For iOS compatibilty, use instead

    <html><body>

<script>
var id = '13KmAf2uc13fWxPvn8dtk9j9kOL3nCVqi8H-wYau6Tww';
var gid = '0';
var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
fetch(url)
  .then(response => response.text())
  .then(data => document.getElementById("Vinorosato").innerHTML=myItems(data.substring(117).slice(0, -3))
  );
function myItems(jsonString){
  var json = JSON.parse(jsonString);
  var table = '<table>'
  for (var i=0;i<json.rows.length;i++){
    var nome = json.rows[i].c[0].v;
    var ingredienti = json.rows[i].c[1].v;
    var prezzo = json.rows[i].c[2].v;
    table += '<tr><td>' + nome + '</td><td>' + ingredienti + '</td><td>' + prezzo + '&nbsp;&euro;</td></tr>'
  }
  table += '</table>'
  return table
}
</script>

<div id="Vinorosato">List ...</div>

</body></html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search