Getting 'undefined' when accessing item in an array returned from Django Rest Framework via AJAX

Viewed 233

I am trying to access data in an array returned from an AJAX GET Request to Django Rest Framework. However, I keep getting undefined, I can console log the data and see what I am trying to target with my index numbers but I am having no luck. I also tried using JSON.parse() but this just threw an error.

For visualisation here is what the console.log prints:https://ibb.co/9y8CBw9

Here's what I've got for my Javascript:

document.querySelector('#userLists').addEventListener('click', function(event) {
    if (event.target.dataset.name) {
      var listname = event.target.dataset.name
      console.log(listname);
      getTableData()
    }
})

const getTableData = function(){
  $.ajax({
      type: 'GET',
      url: '/api/uservenue/',
      data: {},
      success: function (data) {
        data.forEach(item => { 
              console.log(item.venue)
          })
          fillTable(data)
        }
      });
};

function fillTable(data)
{
  console.log(data)
  const table = document.getElementById("dashboardTableBody");
    let row = table.insertRow();
    let name = row.insertCell(0);
    name.innerHTML = data[0][1]; 
}

Here is my serializers from DRF:

class mapCafesSerializer(serializers.ModelSerializer):
    class Meta:
        model = mapCafes
        fields = ['id', 'cafe_name', 'cafe_address', 'description']


class UserVenueSerializer(serializers.ModelSerializer):
    venue = mapCafesSerializer()
    class Meta:
        model = UserVenue
        fields = ['id', 'list', 'venue']

And these are the pertinent models:

class UserVenue(models.Model):
    venue = models.ForeignKey(mapCafes, on_delete=models.PROTECT)  
    list = models.ForeignKey(UserList, on_delete=models.PROTECT)

class mapCafes(models.Model): 
    id = models.BigAutoField(primary_key=True)
    cafe_name = models.CharField(max_length=200)
    cafe_address = models.CharField(max_length=200)
    cafe_long = models.FloatField()
    cafe_lat = models.FloatField()
    geolocation = models.PointField(geography=True, blank=True, null=True)
    venue_type = models.CharField(max_length=200)
    source = models.CharField(max_length=200)
    description = models.CharField(max_length=1000)

    class Meta:
        managed = False
        db_table = 'a_cafes'


    def __str__(self):
        return self.cafe_name
1 Answers

Try replacing

name.innerHTML = data[0][1];

with

name.innerHTML = data[0].venue.cafe_name; 

The console log image is showing data to be a one dimensional array with object entries of form {id, list, venue}. Looking up property 1 of an object entry as if it were an array returns undefined.

Related