US list of States in JSON format ( ready to usable in NodeJS or ReactJS )

You are currently viewing US list of States in JSON format ( ready to usable in NodeJS or ReactJS )

Storing information in a structured, easily accessible manner is crucial for web development. JSON (JavaScript Object Notation) has emerged as a prevalent standard for conveying data, especially in web applications. This is largely because of its compatibility with JavaScript, the backbone of many modern web apps.

If you’re working on a web app in NodeJS, ReactJS, or even plain JavaScript, and you require a list of all US states, then having this data in a JSON format would be immensely useful. In this blog post, I’ll provide a ready-to-use JSON object containing all the US states, followed by a brief tutorial on how to utilize this object in both NodeJS and ReactJS.

JSON Representation of US States:

Here’s a simple JSON representation of US states:

[
    { value:"AL", select: "Alabama"}, { value:"AK", select: "Alaska"}, { value:"AS", select: "American Samoa"}, { value:"AZ", select: "Arizona"}, { value:"AR", select: "Arkansas"}, { value:"CA", select: "California"}, { value:"CO", select: "Colorado"}, { value:"CT", select: "Connecticut"}, { value:"DE", select: "Delaware"}, { value:"DC", select: "District Of Columbia"}, { value:"FM", select: "Federated States Of Micronesia"}, { value:"FL", select: "Florida"}, { value:"GA", select: "Georgia"}, { value:"GU", select: "Guam"}, { value:"HI", select: "Hawaii"}, { value:"ID", select: "Idaho"}, { value:"IL", select: "Illinois"}, { value:"IN", select: "Indiana"}, { value:"IA", select: "Iowa"}, { value:"KS", select: "Kansas"}, { value:"KY", select: "Kentucky"}, { value:"LA", select: "Louisiana"}, { value:"ME", select: "Maine"}, { value:"MH", select: "Marshall Islands"}, { value:"MD", select: "Maryland"}, { value:"MA", select: "Massachusetts"}, { value:"MI", select: "Michigan"}, { value:"MN", select: "Minnesota"}, { value:"MS", select: "Mississippi"}, { value:"MO", select: "Missouri"}, { value:"MT", select: "Montana"}, { value:"NE", select: "Nebraska"}, { value:"NV", select: "Nevada"}, { value:"NH", select: "New Hampshire"}, { value:"NJ", select: "New Jersey"}, { value:"NM", select: "New Mexico"}, { value:"NY", select: "New York"}, { value:"NC", select: "North Carolina"}, { value:"ND", select: "North Dakota"}, { value:"MP", select: "Northern Mariana Islands"}, { value:"OH", select: "Ohio"}, { value:"OK", select: "Oklahoma"}, { value:"OR", select: "Oregon"}, { value:"PW", select: "Palau"}, { value:"PA", select: "Pennsylvania"}, { value:"PR", select: "Puerto Rico"}, { value:"RI", select: "Rhode Island"}, { value:"SC", select: "South Carolina"}, { value:"SD", select: "South Dakota"}, { value:"TN", select: "Tennessee"}, { value:"TX", select: "Texas"}, { value:"UT", select: "Utah"}, { value:"VT", select: "Vermont"}, { value:"VI", select: "Virgin Islands"}, { value:"VA", select: "Virginia"}, { value:"WA", select: "Washington"}, { value:"WV", select: "West Virginia"}, { value:"WI", select: "Wisconsin"}, { value:"WY", select: "Wyoming"}
]

Using in NodeJS:

If you want to utilize this data in a NodeJS application, follow these steps:

  1. Save the JSON object in a file named states.json.
  2. Import the JSON file in your script:
const states = require('./states.json');
  1. Now, you can easily loop through or manipulate the data:
states.forEach(state => {
  console.log(`${state.value}: ${state.select}`);
});

Using in ReactJS:

For ReactJS, the procedure is pretty straightforward too:

  1. Save the JSON object in a file within your src directory, named states.json.
  2. Import the JSON file in your React component:
import states from './states.json';
  1. Use the data within your component’s render method or elsewhere:
const stateList = states.map(state => (
  <div key={state.value}>{state.select}</div>
));

Conclusion:

Having structured data in the form of JSON is invaluable in web development. The JSON format provided above for US states is concise and easily accessible for various applications, be it NodeJS, ReactJS, or other JavaScript frameworks. By following the mentioned steps, you can seamlessly incorporate this data into your projects.

Atiqur Rahman

I am MD. Atiqur Rahman graduated from BUET and is an AWS-certified solutions architect. I have successfully achieved 6 certifications from AWS including Cloud Practitioner, Solutions Architect, SysOps Administrator, and Developer Associate. I have more than 8 years of working experience as a DevOps engineer designing complex SAAS applications.

Leave a Reply