通过 AJAX 访问从 Django Rest Framework 返回的数组中的项目时获取“未定义”

Posted 2023-02-24

【中文标题】通过 AJAX 访问从 Django Rest Framework 返回的数组中的项目时获取“未定义”

【英文标题】：Getting 'undefined' when accessing item in an array returned from Django Rest Framework via AJAX

【发布时间】：2021-05-21 01:25:08

【问题描述】：

我正在尝试访问从 AJAX GET 请求返回到 Django Rest Framework 的数组中的数据。但是，我不断收到undefined，我可以控制台记录数据并查看我试图用我的索引号定位的目标，但我没有运气。我也尝试过使用JSON.parse()，但这只是抛出了一个错误。

console.log 打印的内容如下：https://ibb.co/9y8CBw9

这是我为 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]; 

这是我来自 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']

这些是相关的模型：

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

【问题讨论】：

你从哪里得到undefined？可能代码在调用getTableData 之后但在来自服务器的响应触发对AJAX 成功函数的回调之前尝试访问响应数据。

你好。我在 HTML 中未定义。 name.innerHTML = 数据[0][1];

【参考方案1】：

尝试替换

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

与

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

控制台日志图像显示data 是一个一维数组，其中对象条目的形式为id, list, venue。将对象条目的属性 1 当作数组查找会返回 undefined。