API 在 HTML 中显示未定义而不是值

Question

我不太清楚为什么会这样，但这是我的代码

<div id="list">

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script>
        $(document).ready(function(){
          $.ajax({
            type:"get",
            url:"https://cors-anywhere.herokuapp.com/http://41.78.37.222/dev/api.php?action=list",
            success: function(data){
            result="";
            for(i in data){
            result+="MAKE: "+data[i].make+" // TYPE: "+data[i].type+"<br>";
            }
            $("#list").html(result);
            }
          });
        });
    </script>

请注意我正在使用 https://cors-anywhere.herokuapp.com/ infront of my API URL to get rid if CORS Policy error (temporarily). The API URL is http://41.78.37.222/dev/api.php?action=list

当运行我的代码时，它显示：

制作：未定义//类型：未定义

在 HTML 而不是像这样的东西：

制造：BMW 320i (E90) 2009 改款 // 类型：标准

Answer 1

问题出在data变量的使用上。代码假定 data 是一个对象——实际上它是一个字符串。

当代码执行 for(i in data) 时，您将单步执行字符串中的每个字符。

要解决此问题，需要使用 JSON.parse() 将 data 中的字符串转换为对象。然后可以按照与以前相同的方式枚举生成的对象，如下面的工作代码段所示：

$(document).ready(function(){
  $.ajax({
    type:"get",
    url:"https://cors-anywhere.herokuapp.com/http://41.78.37.222/dev/api.php?action=list",
    success: function(data){
    result="";
    dataObj = JSON.parse(data);
    for (i in dataObj) {
      item = dataObj[i];
      result+="MAKE: "+item.make+" // TYPE: "+item.type+"<br>";
    }
    $("#list").html(result);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">

</div>

API 在 HTML 中显示未定义而不是值

API displaying undefined in HTML and not the value

javascript

api

ajax

undefined