CODEWITHSUNDEEP
javascriptgoogle-sheets
Oliverater
Oliverater

Reputation: 61

Display only most recent row of data in Google Sheet from api call

I'm trying to print the most recent row from a Google Sheet, which updates daily. I'm making an API call to it and returning it in Json and whilst I can grab the most recent value, I can only seem to print the whole column of data: I apologise the code is a bit slap and dash, I'm new to this.

Javascript

var sheetsuUrl = "https://sheetsu.com/apis/v1.0/3e242af0";

   $.ajax({
     url: sheetsuUrl,
     dataType: 'json',
     type: 'GET',

     // place for handling successful response
     success: function(data) {
      console.log(data[data.length-1]['moved'])
       addCharacters(data);
     },

     // handling error response
     error: function(data) {
       console.log(data);
     }
   });


   addCharacters = function(characters) {
     var list = $('#ponies');
     for(var i=0; i<characters.length; i+=1) {
       char = characters[i];
   function lastNoZero(myRange) {
lastRow = myRange.length;
for (; myRange[lastRow - 1] == "" || myRange[lastRow - 1] == 0 && lastRow > 0 ; lastRow--)  { 
   /*nothing to do*/ 
}
return myRange[lastRow - 1];
}

myRange = char.moved;      
       if (char.moved == 'entered') {
          html = "<img     src='https://media.firebox.com/pic/p5294_column_grid_12.jpg'/>";

        } else { 
          html = "<img src='http://41.media.tumblr.com/30b1b0d0a42bca3759610242a1ff0348/tumblr_nnjxy1GQAA1tpo3v2o1_540.jpg'/>";
       };
       list.append(html);
     }
    }

HTML

<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<div id="ponies"></div>

CSS

html img{
width:100px;
height:100px;
}

Upvotes: 2

Views: 144

Answers (1)

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

You needed to reference the last item in the array returned by your GET request.

characters[characters.length - 1]; will get the last character in the characters array. Then, to ensure that the html is not added on each run of the loop, you needed to move list.append(html); outside the loop, ensuring that it only appends the content to the page once.

Run the code snippet below to see in action.

var sheetsuUrl = "https://sheetsu.com/apis/v1.0/3e242af0";

$.ajax({
url: sheetsuUrl,
dataType: 'json',
type: 'GET',

// place for handling successful response
success: function(data) {
    addCharacters(data);
},

// handling error response
error: function(data) {
    console.log(data);
}
});

addCharacters = function(characters) {
   var list = $('#ponies');
   for(var i=0; i<characters.length; i+=1) {
      char = characters[characters.length - 1];
   
   myRange = char.moved;      
      if (char.moved == 'entered') {
          html = "<img     src='https://media.firebox.com/pic/p5294_column_grid_12.jpg'/>";

       } else { 
        html = "<img src='http://41.media.tumblr.com/30b1b0d0a42bca3759610242a1ff0348/tumblr_nnjxy1GQAA1tpo3v2o1_540.jpg'/>";
    };
    
   }
   
  //for illustration purposes
  list.append(characters[characters.length - 1].time)
  
  //the code to attach the image
  list.append(html);
}
   
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<div id="ponies"></div>

Upvotes: 1

Related Questions