I've read through numerous answers on SO, but most don't show both the Flask and JS side of my question, so I don't believe this is a duplicate. Specifically, using React/JS, I'm attempting to fetch a list of dictionaries from my Flask API.

On the server side, I've successfully serialized my class, and can print the list of dictionaries as expected. However, after I return it using JSONIFY (as suggested in several SO questions), it results in undefined on the JS side when I try to access the data. From reading online, it appeared that I could attempt to JSON parse the response data, but this similarly shows undefined. This leads me to believe that the issue may in fact be on the server side. Regardless, I'm also unsure how to properly access this list of dictionaries in my fetch function (I would've expected that I can do something along the lines of data[0]['name']).

I'd really appreciate any guidance you might have - thank you for reading this far.

eqtls prints as follows in api.py:

[{'id': 1, 'name': 'Bearbrook Skateboard Park', 'description': 'Flat asphalt surface, 5 components', 'xcoord': -75, 'ycoord': 45, 'date_added': datetime.datetime(2021, 10, 26, 19, 46, 10)}]

api.py

class Activity(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    xcoord = db.Column(db.Integer,nullable=False)
    ycoord = db.Column(db.Integer, nullable=False)
    name = db.Column(db.String(200))
    description = db.Column(db.String(200))
    date_added = db.Column(db.DateTime, default = datetime.utcnow)

    #create a string
    def __repr__(self):
        return f"<id={self.id}, name={self.name},description={self.description},xcoord={self.xcoord},ycoord={self.ycoord},date_added={self.date_added}>"

    def serialize(self):
        return {
            'id': self.id, 
            'name': self.name,
            'description': self.description,
            'xcoord': self.xcoord, 
            'ycoord': self.ycoord,
            'date_added': self.date_added
        }


@app.route('/allActivities', methods=['GET'])
def allActivities():
    print('hit allActivities routing')
    allActivities = Activity.query.all()
    print(str(allActivities))
    eqtls=[activity.serialize() for activity in allActivities]
    print(str(eqtls))

    
    sys.stdout.flush()

    return jsonify(eqtls)

Currently in app.js, my data variable logs as undefined. app.js

useEffect(()=> {
       fetch('/allActivities').then(response => {
       if(response.ok){
           console.log(response)
         return response.json()
       }
       }).then(data => setAllActivities(data))
           .then(data => {
               console.log(data);
               //var jsonData = JSON.parse((data));
               //console.log(jsonData[0].name);
           })

   },[])