将 API 返回 JSON 注入 <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>

数据来自 JSON 我从 API 电话中获得。 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/ and http://api.jquery.com/jquery.ajax/，它解释了如何使用 ajax 检索 JSON。

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

将 API 返回 JSON 注入 <li> Materialized.css JS

Inject an API Returned JSON Into <li> Materialized.css JS

html

javascript

jquery

json

materialize