如何将 Json 文件中的值分配给 Javascript 数组答案

【问题标题】：how to assign values from Json file to Javascript array如何将 Json 文件中的值分配给 Javascript 数组
【发布时间】：2018-09-18 17:35:15
【问题描述】：

要填充我的typeahead search 中的国家/地区列表，我手动声明。

var data = [
    {
        "id": "Austria",
        "continent": "Europe" 
    }, 
         ...
    { 
        "id": "USA",
        "continent": "America" 
    }
];

我希望数组 data 从外部 json 文件中获取数据。假设我的countries.json 文件包含这些数据

[
    {
        "id": "Austria",
        "continent": "Europe"
    }, 
    {
        "id": "France",
        "continent": "Europe"
    }, 
    {
        "id": "Japan",
        "continent": "Asia"
    }, 
    {
        "id": "USA",
        "continent": "America"
    }
]

我使用getJSON来加载我的数组中的json数据data

var data = [];
$.getJSON( "js/countries.json", function(json){
  data = json;
  console.log(data);
});

控制台向我显示data 包含我需要的值，但在我使用data 作为源的其余代码中，它不起作用。当我从 Json 文件加载数据时，搜索输入中没有显示任何国家/地区。

任何建议请我缺少什么？谢谢你。

var data = [{
  "id": "Austria",
  "continent": "Europe"
}, {
  "id": "France",
  "continent": "Europe"
}, {
  "id": "Japan",
  "continent": "Asia"
}, {
  "id": "USA",
  "continent": "America"
}];


typeof $.typeahead === 'function' && $.typeahead({
  input: ".js-typeahead-input",
  minLength: 0,
  hint: true,
  searchOnFocus: true,

  group: {
    key: "continent",
    template: function(item) {
      var continent = item.continent;
      return continent;
    }
  },
  emptyTemplate: 'no result for {{query}}',
  groupOrder: ["Europe", "Asia", "America"],
  display: ["id"],
  correlativeTemplate: true,
  dropdownFilter: [{
    key: 'continent',
    template: '<strong>{{continent}}</strong> continent',
    all: 'All Countries'
  }],
  multiselect: {
    matchOn: ["id"],
    data: function() {
      var deferred = $.Deferred();
      return deferred;
    }
  },

  template: '<span>' +
    '<span class="id">{{id}}</span>' +
    '</span>',
  source: {
    groupName: {
      data: data
    }
  },
  debug: true
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.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-typeahead/2.10.6/jquery.typeahead.js"></script>

<div class="typeahead__container">
  <div class="typeahead__field">
    <span class="typeahead__query">
                <input class="js-typeahead-input"
                       name="q"
                       type="search"
                       autofocus
                       autocomplete="on">
            </span>
  </div>
</div>

【问题讨论】：

你在哪里调用你创建的数据变量？
@AndreaPeekatchuFollack 在这部分；来源：{组名：{数据：数据}}
您可以随时使用 js 文件导出一个名为 data 的变量与您的对象
请在getjson 中包含成功处理程序，然后将数据解析为 JSON 并在成功处理程序中执行剩余任务

标签： javascript jquery arrays json typeahead.js

【解决方案1】：

试试

data = JSON.parse(json);

请求将获取文本，您需要将该文本解析为 JavaScript 对象。看看我如何将你的 sn-p 中的对象转换为需要解析的字符串。试试

console.log(typeof json)

你会看到它是一个字符串，而不是一个数组。

var data = JSON.parse(`[{
  "id": "Austria",
  "continent": "Europe"
}, {
  "id": "France",
  "continent": "Europe"
}, {
  "id": "Japan",
  "continent": "Asia"
}, {
  "id": "USA",
  "continent": "America"
}]`);


typeof $.typeahead === 'function' && $.typeahead({
  input: ".js-typeahead-input",
  minLength: 0,
  hint: true,
  searchOnFocus: true,

  group: {
    key: "continent",
    template: function(item) {
      var continent = item.continent;
      return continent;
    }
  },
  emptyTemplate: 'no result for {{query}}',
  groupOrder: ["Europe", "Asia", "America"],
  display: ["id"],
  correlativeTemplate: true,
  dropdownFilter: [{
    key: 'continent',
    template: '<strong>{{continent}}</strong> continent',
    all: 'All Countries'
  }],
  multiselect: {
    matchOn: ["id"],
    data: function() {
      var deferred = $.Deferred();
      return deferred;
    }
  },

  template: '<span>' +
    '<span class="id">{{id}}</span>' +
    '</span>',
  source: {
    groupName: {
      data: data
    }
  },
  debug: true
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.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-typeahead/2.10.6/jquery.typeahead.js"></script>

<div class="typeahead__container">
  <div class="typeahead__field">
    <span class="typeahead__query">
                <input class="js-typeahead-input"
                       name="q"
                       type="search"
                       autofocus
                       autocomplete="on">
            </span>
  </div>
</div>

【讨论】：