Extracting JSON data into a table

Question

I am trying to create a table of all US states. Instead manually creating the table, I thought I would try using Javascript to create the table using data from a JSON file.

I have this jQuery function that is returning the JSON as an object. When I call console.log, I can see the JSON data like so:

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"}

I have tried storing that as a variable to then transfer to an array and then I loop through that array to create the table but it doesn't recognise the variable outside of that jQuery function.

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

I am hoping someone can show me how to store the incoming JSON data as an array so that I can follow some other examples on creating a table by looping through that array.

How do you expect us to know the response from `resources/js/states.js`? Do you actually get a json response from that call? — Alon Eitan, Jul 21 '19 at 15:14
Hi Alon, I have made an edit to add the JSON data that is returned in the console. — Swapnil, Jul 21 '19 at 15:19
This is what you are looking for, check the accepted answer https://stackoverflow.com/questions/30464675/create-table-from-json-pure-javascript — Alon Eitan, Jul 21 '19 at 15:21
Thanks for the reponse Elon. The thing I am stuck on is how do I get the JSON data into a JS variable, it's in another file rather than in the same file. — Swapnil, Jul 21 '19 at 15:22
Possible duplicate of [Create table from Json pure javascript](https://stackoverflow.com/questions/30464675/create-table-from-json-pure-javascript) — Heretic Monkey, Jul 21 '19 at 15:23
Hey, I think that post answers my question, the only thing I am unsure about is how to get the JSON data (which is another file) into JS variable so I can then run through the rest of the code in that post. — Swapnil, Jul 21 '19 at 15:27
You just need to iterate over `data` (instead of `children` like in the other question) — Alon Eitan, Jul 21 '19 at 15:28
Okay, that makes sense. Would I do it inside of the jQuery function? Thanks for your help. — Swapnil, Jul 21 '19 at 15:29

Tehc · Answer 1 · 2019-07-21T15:44:39.897

That's not even a JSON file. That's a JS file.

You need to create a new JSON file in the 'resources/js' folder called states.json and add the states to the file. Example of 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"}
]

Use this to access the JSON file as an array:

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

Note: If your JSON file does not contain valid JSON, JQuery will throw an error. Edit: I forgot to include how to access it outside of the callback's scope (in the global scope).

My mistake, thanks for correcting me. I found the data online and am not experienced enough to tell that it wasn't JSON. The jQuery did not throw up any error however. — Swapnil, Jul 21 '19 at 15:34
No problem. @Quentin How did I not answer the question? OP didn't use valid JSON and instead used a JavaScript file thinking it was JSON. — Tehc, Jul 21 '19 at 15:37
The OP is successfully getting data into their program (they quoted the results of the console.log). The question is asking how to generate HTML elements from it. You didn't even touch on that. — Quentin, Jul 21 '19 at 15:39
re edit: That [usually won't work](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). — Quentin, Jul 21 '19 at 15:46

Extracting JSON data into a table

1 Answers1