Question

我正在尝试使用JQCloud jquery plugin从一些Elasticsearch数据生成标签云。我面临的主要问题是，我收到的数据是使用条款'key'表示标签，'doc_count'表示标签在数据中显示的次数。我尝试了几种不同的方法来正确解析数据，但标签云从未显示在页面上，我也没有从Chrome开发工具控制台获得任何重要信息。

先致电

$(document).ready(function(){
  $.ajax({
    url: "/tags",
    type: "get",
    async: false,
    success: function(data){
            $("#wordCloud").jQCloud([{text: data[0].key, weight: data[0].doc_count}, {text: data[1].key, weight: data[1].doc_count}]);
    }
  });
});

第二次电话

$(document).ready(function(){
  $.ajax({
    url: "/tags",
    type: "get",
    async: false,
    success: function(data) {
      var json = JSON.parse(data);
      $("#tagcloud").jQCloud([json]);
    }
  });
});

这两项建议均来自Import a JS array using ajax to pass though to a function/plugin in JQuery。

Answer 1

您永远不会使用同步Ajax。没有理由在Ajax调用中设置async: false。
jQuery为您解析JSON。除非服务器响应出现问题，否则您无需自己致电JSON.parse()。
您应该使用jQuery在Ajax调用中提供的基于promise的接口，因为它比传统的success回调具有更高的通用性。
如果您的Ajax调用就像“获取此网址然后执行某些操作”一样简单，则使用$.get()代替$.ajax()将减少必要的代码行。
< / LI>
显然jQCloud需要一个像这样的对象数组：{text: ..., weight: ...}，但您的API端点并不能完全满足您的格式。 $.map()可以帮助您转换数组元素。

因此，考虑到所有这些，您的Ajax调用可以重写为：

$.get("/tags").done(function (data) {
    var tagCloud = $.map(data, function (item) {
        return {text: item.key, weight: item.doc_count};
    });
    $("#wordCloud").jQCloud(tagCloud);
});

下面的可运行代码示例：

$.mockjax({
    url: "/tags",
    responseText: [
      {"key": "ibm_created", "doc_count": 85},
      {"key": "ibm_dedicated_public", "doc_count": 74},
      {"key": "ibm_third_party", "doc_count": 40},
      {"key": "p", "doc_count": 31},
      {"key": "service", "doc_count": 30},
      {"key": "bluemix", "doc_count": 29},
      {"key": "development", "doc_count": 29},
      {"key": "cloud", "doc_count": 28}
    ]
});

$.get("/tags").done(function (data) {
    var tagCloud = $.map(data, function (item) {
      return {text: item.key, weight: item.doc_count};
    });
    $("#wordCloud").jQCloud(tagCloud);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.4/jqcloud.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.4/jqcloud-1.0.4.min.js"></script>

<div id="wordCloud" style="width: 600px; height: 200px;"></div>

Answer 2

在第二个，没有必要添加[]到json var，json var已经是一个数组

$(document).ready(function(){
  $.ajax({
    url: "/tags",
    type: "get",
    async: false,
    success: function(data) {
      var json = JSON.parse(data);
      $("#tagcloud").jQCloud(json);
    }
  });
});

使用ajax将JS数组传递给JQuery

2 个答案: