如何将Json文件中的值赋给Javascript数组

Question

填写我的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在我的数组data中加载json数据

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>

Answer 1

尝试

data = JSON.parse(json);

请求将获取文本，您需要将该文本解析为JavaScript对象。了解如何将代码段中的对象转换为需要解析的字符串。尝试

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>