How to bind Google Sheets JSON feed with Polymer dom-repeat template

Other Questions Google Sheets
1

I’m new to Polymer and having trouble with data binding from Google Sheets

I want to create a repeating template that displays data from a Google Sheets document using its JSON feed. I’m getting the spreadsheet data as JSON but can’t figure out how to properly bind it to my template.

Here’s what I’m trying to do:

<!-- Fetch JSON data from Google Sheets -->
<iron-ajax auto 
           url="[GOOGLE_SHEETS_JSON_URL]" 
           handle-as="json" 
           last-response="{{sheetData}}"></iron-ajax>

<!-- Display data using dom-repeat -->
<template is="dom-repeat" items="{{sheetData}}">
  <div class="photo-item">
    <a href="{{feed.entry.item.gsx$photolink.$t}}">
      <img src="{{feed.entry.item.gsx$thumbnail.$t}}" 
           data-full="{{feed.entry.item.gsx$photolink.$t}}" 
           data-caption="{{feed.entry.item.gsx$title.$t}}" 
           data-info="{{feed.entry.item.gsx$description.$t}}">
    </a>
  </div>
</template>

The problem is I keep getting this error message:

[dom-repeat::dom-repeat]: expected array for items, found Object {version: "1.0", encoding: "UTF-8", feed: Object}

I think I’m not accessing the correct path in the JSON structure. The data seems to be nested under feed > entry but I can’t get the binding right. How do I properly target the array of entries inside the JSON response?

Any guidance would be really helpful!

2

You’re experiencing this issue because Google Sheets wraps your data in multiple JSON layers. Dom-repeat expects an array but receives the entire response object instead. I faced a similar issue when I began using the Sheets API. To resolve this, create a computed property that extracts just the entries: javascript _computeEntries: function(sheetData) { return sheetData && sheetData.feed && sheetData.feed.entry ? sheetData.feed.entry : []; } Then modify your template accordingly: html <template is="dom-repeat" items="{{_computeEntries(sheetData)}}"> <div class="photo-item"> <a href="{{item.gsx$photolink.$t}}"> <img src="{{item.gsx$thumbnail.$t}}" data-full="{{item.gsx$photolink.$t}}" data-caption="{{item.gsx$title.$t}}" data-info="{{item.gsx$description.$t}}"> </a> </div> </template> This approach manages cases where the data isn’t fully loaded yet and prevents errors during initial rendering.

3

Had the same issue last week! Google Sheets’ JSON structure is weird. Try adding an observer to handle the data - use observers: ['_dataChanged(sheetData.feed.entry)'] then set a local property in that observer function. Worked for me when direct binding didn’t.

4

The error message indicates the issue: dom-repeat requires an array, but you’re providing the entire JSON object. The Google Sheets JSON feed contains the actual data nested under several layers, so you need to extract the entries array.

Change your iron-ajax setup to access the correct data path. Instead of binding sheetData directly to items, use sheetData.feed.entry. Your template should look like this:

<template is="dom-repeat" items="{{sheetData.feed.entry}}">
  <div class="photo-item">
    <a href="{{item.gsx$photolink.$t}}">
      <img src="{{item.gsx$thumbnail.$t}}" 
           data-full="{{item.gsx$photolink.$t}}" 
           data-caption="{{item.gsx$title.$t}}" 
           data-info="{{item.gsx$description.$t}}">
    </a>
  </div>
</template>

This modification changes the binding from feed.entry.item.gsx$… to just item.gsx$…, as ‘item’ represents each individual entry in the loop.