时间戳

首页 > 解决方案 > 将 JSON 数据提取到表中

javascript - 将 JSON 数据提取到表中

问题描述

我正在尝试创建一个包含所有美国州的表格。而不是手动创建表，我想我会尝试使用 Javascript 使用 JSON 文件中的数据创建表。

我有这个将 JSON 作为对象返回的 jQuery 函数。当我调用 console.log 时，我可以看到如下 JSON 数据：

0: {name: "Alabama", abbreviation: "AL"}
1: {name: "Alaska", abbreviation: "AK"}
2: {name: "American Samoa", abbreviation: "AS"}
3: {name: "Arizona", abbreviation: "AZ"}
4: {name: "Arkansas", abbreviation: "AR"}
5: {name: "California", abbreviation: "CA"}
6: {name: "Colorado", abbreviation: "CO"}
7: {name: "Connecticut", abbreviation: "CT"}
8: {name: "Delaware", abbreviation: "DE"}
9: {name: "District Of Columbia", abbreviation: "DC"}
10: {name: "Federated States Of Micronesia", abbreviation: "FM"}
11: {name: "Florida", abbreviation: "FL"}
12: {name: "Georgia", abbreviation: "GA"}
13: {name: "Guam", abbreviation: "GU"}
14: {name: "Hawaii", abbreviation: "HI"}
15: {name: "Idaho", abbreviation: "ID"}
16: {name: "Illinois", abbreviation: "IL"}
17: {name: "Indiana", abbreviation: "IN"}
18: {name: "Iowa", abbreviation: "IA"}
19: {name: "Kansas", abbreviation: "KS"}

我尝试将其存储为变量，然后传输到数组，然后循环遍历该数组以创建表，但它无法识别该 jQuery 函数之外的变量。

$(document).ready(function () {
  $.getJSON('resources/js/states.js   ', function (data) {
    console.log(data);
  });
});

我希望有人可以向我展示如何将传入的 JSON 数据存储为数组，以便我可以通过循环遍历该数组来遵循其他一些创建表的示例。

标签： javascriptjqueryhtmlarraysjson

解决方案

这甚至不是 JSON 文件。那是一个JS文件。

  1. 您需要在名为“resources/js”的文件夹中创建一个新的 JSON 文件，states.json并将状态添加到文件中。示例states.json：
[
    {"name":"Alabama","alpha-2":"AL"},
    {"name":"Alaska","alpha-2":"AK"},
    {"name":"Arizona","alpha-2":"AZ"},
    {"name":"Arkansas","alpha-2":"AR"},
    {"name":"California","alpha-2":"CA"},
    {"name":"Colorado","alpha-2":"CO"},
    {"name":"Connecticut","alpha-2":"CT"},
    {"name":"Delaware","alpha-2":"DE"},
    {"name":"District of Columbia","alpha-2":"DC"},
    {"name":"Florida","alpha-2":"FL"},
    {"name":"Georgia","alpha-2":"GA"},
    {"name":"Hawaii","alpha-2":"HI"},
    {"name":"Idaho","alpha-2":"ID"},
    {"name":"Illinois","alpha-2":"IL"},
    {"name":"Indiana","alpha-2":"IN"},
    {"name":"Iowa","alpha-2":"IA"},
    {"name":"Kansa","alpha-2":"KS"},
    {"name":"Kentucky","alpha-2":"KY"},
    {"name":"Lousiana","alpha-2":"LA"},
    {"name":"Maine","alpha-2":"ME"},
    {"name":"Maryland","alpha-2":"MD"},
    {"name":"Massachusetts","alpha-2":"MA"},
    {"name":"Michigan","alpha-2":"MI"},
    {"name":"Minnesota","alpha-2":"MN"},
    {"name":"Mississippi","alpha-2":"MS"},
    {"name":"Missouri","alpha-2":"MO"},
    {"name":"Montana","alpha-2":"MT"},
    {"name":"Nebraska","alpha-2":"NE"},
    {"name":"Nevada","alpha-2":"NV"},
    {"name":"New Hampshire","alpha-2":"NH"},
    {"name":"New Jersey","alpha-2":"NJ"},
    {"name":"New Mexico","alpha-2":"NM"},
    {"name":"New York","alpha-2":"NY"},
    {"name":"North Carolina","alpha-2":"NC"},
    {"name":"North Dakota","alpha-2":"ND"},
    {"name":"Ohio","alpha-2":"OH"},
    {"name":"Oklahoma","alpha-2":"OK"},
    {"name":"Oregon","alpha-2":"OR"},
    {"name":"Pennsylvania","alpha-2":"PA"},
    {"name":"Rhode Island","alpha-2":"RI"},
    {"name":"South Carolina","alpha-2":"SC"},
    {"name":"South Dakota","alpha-2":"SD"},
    {"name":"Tennessee","alpha-2":"TN"},
    {"name":"Texas","alpha-2":"TX"},
    {"name":"Utah","alpha-2":"UT"},
    {"name":"Vermont","alpha-2":"VT"},
    {"name":"Virginia","alpha-2":"VA"},
    {"name":"Washington","alpha-2":"WA"},
    {"name":"West Virginia","alpha-2":"WV"},
    {"name":"Wisconsin","alpha-2":"WI"},
    {"name":"Wyoming","alpha-2":"WY"}
]
  1. 使用它来访问 JSON 文件作为一个数组：
var states = [];
$(document).ready(function () {
  $.getJSON('resources/js/states.json', function (data) {
    console.log(data);
    states = data;
  });
});

注意：如果您的 JSON 文件不包含有效的 JSON，JQuery 将抛出错误。 编辑：我忘了包括如何在回调范围之外（在全局范围内）访问它。

推荐阅读