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
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
.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments