在 Table Javascript 中显示 Json 数组

Show Json Array in Table Javascript

我有一个查询 instagram API 的 API。我正在尝试使用 API 并在 table 中显示标签搜索。 Json 响应是这样的:

{"data":[{"media_count":13485788,"name":"argentina"},{"media_count":47097,"name":"argentinas"}]}

这是我的 javascript 代码: 型号:

define([], function(){
  return {
    InstagramTag: "",
    exists: true,
    tags: []
  } ;

});

控制器:

define(["jquery", "events", "model"], function($, events, model) {

  function initialize() {
    $("#user-selection").change(function() {
      var TagName = $("#user-selection").val() ;
      console.log("Fetching information for " + TagName) ;
      $("*").css({"cursor": "wait"}) ;
      $.getJSON("/api/tag/" + TagName, function(data) {
        model.exists = true ;
        model.tags = data ;
      }).fail(function() {
        model.exists = false ;
        model.tags = [] ;
      }).always(function() {
        model.InstagramTag = TagName ;
        $("*").css({"cursor": "initial"}) ;
        events.trigger("model_updated") ;
      });
    }) ;
  }

  return { "initialize": initialize };

});

标签表:

define(["underscore"], function(_) {

  var rowTemplate = _.template("<tr>" + 

    "<td><%= name %></td>" +
    "<td><%= media_count %></td>"

    "</tr>") ;

  var repoTable = _.template("<table id='repo-table' class='table'>" +
    "<thead>" +
      "<tr>" +
        "<th>name</th><th>media_count</th>" +
      "</tr>" +
    "</thead>" +
    "<tbody>" +
      "<%= tbody %>" +
    "</tbody>" +
    "</table>") ;

  function build(model, divName) {
    var tbody = "" ;
    _.each(model.tags, function(tag) {
      tbody += rowTemplate(tag) ;
    }) ;
    var table = repoTable({tbody: tbody}) ;
    $(divName).html(table) ;
  }

  return { "build": build } ;
}) ;

我在 TagTable 中遇到错误,无法在 table 中显示 Json 数组。 错误: _.each(model.tags, function(tag) -- media_count 未定义。 当我阅读 de Json Array 时,我发现有问题,但我不知道如何解决这个问题。有什么想法吗?

在我看来,您希望 model.tags 是一个数组。但是,您得到的 JSON 是一个具有 data 字段的对象,该字段的值是一个数组,您将 整个对象 分配给 model.tags而不是领域。要使 model.tags 成为数组,您应该分配 data 字段。所以你应该这样做:

$.getJSON("/api/tag/" + TagName, function(data) {
  model.exists = true ;
  model.tags = data.data; // Change this line!
})...