Using google spreadsheets as a CMS

[namwanzaronald4]

Hey guys, am trying to retrieve data from a google spreadsheet using REST API but my data can’t be rendered, can someone help me fix my code here. Thanks

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  constructor(){
    super();
    this.state = {items: {}};
  }

  componentDidMount() {
    fetch(`https://spreadsheets.google.com/feeds/list/1mQWX4cTCKO705NxADRu1Zz2sBABO0f7O52KXWQPTFFA/od6/public/values?alt=json`)
    .then(res=>res.json()) //get the result as JSON
   .then(items=>{
      const data = Object.assign({}, this.state, {items: items});
      console.log(data);
      this.setState(data);
      console.log(this.state);
    })
  }
  
  render() {
    return (
      <div>
        {
			this.state.items && this.state.items.entry ? this.state.items.entry.map(item=><div key={item.gsx$employid}>{item.gsx$name}</div>) 
          : <div>Loading...</div>
        }
      </div>
    );
  }
}

export default App;

[m3g4p0p]

@namwanzaronald4

my data can’t be rendered

Hi @namwanzaronald4, there is no property items.entry in your response – did you mean items.feed.entry? Also note that each value is again wrapped in an object with the property $t, so it should probably look something like this:

class App extends React.Component {
  constructor () {
    super()
    this.state = {}
  }

  componentDidMount () {
    fetch(`https://spreadsheets.google.com/feeds/list/1mQWX4cTCKO705NxADRu1Zz2sBABO0f7O52KXWQPTFFA/od6/public/values?alt=json`)
      .then(res => res.json()) // get the result as JSON
      .then(items => this.setState({ items }))
  }

  render () {
    return (
    return (
      <div>
        {
          this.state.items &&
            this.state.items.feed &&
            this.state.items.feed.entry
            ? this.state.items.feed.entry.map(
              item => <div key={item.id.$t}>{item.gsx$name.$t}</div>
            )
            : <div>Loading...</div>
        }
      </div>
    )
  }
}

[namwanzaronald4]

Thanks very much @m3g4p0p, this is exactly what i wanted to achieve. Once again thanks so much.