如何在传递给模板（hogan.js）之前预处理 typeahead.js json 结果？答案

【问题标题】：How to preprocess typeahead.js json results before passing to templating (hogan.js)?如何在传递给模板（hogan.js）之前预处理 typeahead.js json 结果？
【发布时间】：2013-09-28 16:24:39
【问题描述】：

typeahead.js 在返回的结果为数组时效果很好：

  var simpleCountriesList = [
     "Andorra",
     "United Arab Emirates",
     "Afghanistan",
     "Antigua and Barbuda"
  ];

在我的例子中，有一个对象数组，但它被包裹在一个像这样的对象中：

  var countryObjectsWrappedInResults = {
   "results":[
      {
         "name":"Andorra"
      },
      {
         "name":"United Arab Emirates"
      },
      {
         "name":"Afghanistan"
      },
      {
         "name":"Antigua and Barbuda"
      }
   ]
};

或

{
   "maintainers":[
      {
         "name":"Jake Harding",
         "url":"https://twitter.com/JakeHarding"
      },
      {
         "name":"Tim Trueman",
         "url":"https://twitter.com/timtrueman"
      },
      {
         "name":"Veljko Skarich",
         "url":"https://twitter.com/vskarich"
      }
   ]
}

我创建了一个小的 jsbin 来说明本地和远程的问题： http://jsbin.com/OseWeKA/5/edit

我正在从 bootstrap typeahead 迁移，我可以使用 updater 将数组从结果中弹出。 twitter.js 的等价物是什么？

【问题讨论】：

标签： jquery bootstrap-typeahead typeahead.js hogan.js

【解决方案1】：

向您的远程数据集添加“过滤器：”。比如：

remote: {
    url: '...',
    filter: function (response) {
        retval = [];
        for (var i = 0;  i < response.maintainers.length;  i++) {
            retval.push(response.maintainers[i].name);
        }
        return retval;
    },
}

filter 将您的远程响应转换为一组数据。

无论如何，您的小提琴不起作用，因为您的服务器不支持 JSONP，您明确指定 dataType: "jsonp"。您的服务器还以Content-Type 的形式返回text/plain，其中应该返回一个脚本。我认为您的“实时”系统中没有真正的问题。

【讨论】：

感谢 Nitzan，过滤器是正确的方法，但我需要使用模板并加入多个字段，而我的预编译模板似乎失败了。我找到了以下示例：var template = Hogan.compile("/%name%/", { delimiters: '/% %/' }), precompiled = function(context) { template.render(context); };但似乎有些不对劲。你熟悉模板吗？你知道它缺少什么吗？
无论如何都要使用模板，但您不需要预编译它。只需传递一个字符串，例如 '{{name}} -- {{other_field}}' 或类似的东西。无论如何，您的问题的答案是filter:。

【解决方案2】：

我建议对此进行破解。

  var newCountrylist = [];
 $.each( countryObjectsWrappedInResults.results , function(k , v ){
    newCountrylist.push(v.name);
  });

【讨论】：

我的 jsbin 示例使用“本地”，但在我的真实应用程序中，我实际上使用的是“远程”，因此我需要处理从服务器返回的结果。我在哪里处理这些结果？
在 ajax 请求的回调中 .. 请发布代码以便我更好地了解
我已经更新了 jsbin 以包含第三个使用“remote”的示例
好吧，那就自己提出 Ajax 请求，然后应用我的建议。并使用本地方法。