javascript - 将 API 返回的 JSON 注入(inject) <li> Materialized.css JS

Question

我目前正在使用 Materialized CSS 框架构建一个基于 JS 的网站。 我是 JS 新手，正在通过这个过程学习。

我有这个 HTML 代码:

 <ul class="collapsible popout" data-collapsible="accordion" ng-controller="web">
    <li id = "event">
      <div class="collapsible-header">
       <div class="col s4 " id = "city"><i class="material-icons">info</i> {{event.city}}</div> 
       <div class="col s4 "><i class="material-icons">query_builder</i> time</div> 
       <div class="col s4 "><i class="material-icons">location_on</i> place</div>  
     </div>
     <div class="collapsible-body">
      <p>
        <div class="col s12 "> Infornation about the event </div> 
      </p>
       <div class="right-align">
          <input type="checkbox" id="test5" class="right-align" />
          <label for="test5"> Attend </label> 
        </div>
    </div>
  </li>

数据来 self 从 API 调用中获取的 JSON。 JSON 如下所示:

[
{"city": "Tel Aviv-Yafo",
  "event_url": "http://www....",
  "attendees": 167, "description": "Dear SpeedMinders,... ",
  "price": "free", "host": "Bella Miller",
  "address": "Yigal Alon 98, Electra Tower,34 Floor, Events Zone Space",
  "date": 1440914400000,
  "id": 6036899730817024,
  "name": "Fast Track to Innovation (FTI) - \u20ac 3 Million opportunity for EU funding"
},
...
]

我想创建一个包含 10 个事件的列表(每个事件都是 li 标签)。 这样我就可以从 JS 本身迭代列表。

我有一个 AJAX 调用来获取 JSON，我似乎找不到以任何方式显示返回的 JSON 的方法:

(function($){
	$(function(){
		$('.button-collapse').sideNav();
		$('.parallax').parallax();
			getlist();
  }); // end of document ready
})(jQuery); // end of jQuery name space


var eventlist = [];
var name = 'ita';
function getlist()
{
	$.ajax({
		url: 'http://attender-mobile.appspot.com/api',
		type: "GET",
		data: "",
		contentType: "json",
		dataType: "jsonp text",
		complete: function (data) {
			alert(JSON.stringify(data));
			eventlist = data;    
		}
	});
document.getElementById("city").innerHTML = JSON.stringify(result);
}

行:

alert(JSON.stringify(result));

仅显示

{"readyState":4,"status":200,"statusText":"load"}

我发现很难找到我需要哪些工具来执行此操作以及如何开始执行此操作。

如有任何帮助，我们将不胜感激...

Answer 1

查看http://api.jquery.com/jquery.getjson/和 http://api.jquery.com/jquery.ajax/解释了如何使用 ajax 检索 JSON。

既然你正在学习，我会给你一两个提示:
1) 您的 dataType 参数:它包含正确的值吗？
2) 您不想使用 success 参数而不是complete 参数吗？