Create Array List dynamically from Javascript Object

Question

Alright, so I'd like to create a selector with different US States, I'll be using this package, which for the input:

var usStates = new UsaStates();
console.log(usStates.states);`

outputs:

{
    name: "Alabama",
    abbreviation: "AL",
    territory: false,
    capital: "Montgomery",
    contiguous: true
},
{
    name: "Alaska",
    abbreviation: "AK",
    territory: false,
    capital: "Juneau",
    contiguous: false
},
...(other states omitted for brevity)
{
    name: "Wyoming",
    abbreviation: "WY",
    territory: false,
    capital: "Cheyenne",
    contiguous: true
}

I already have a selector component, but it takes options as an array prop like so:

<LNSelect
                options={[
                  { label: "Alabama", value: "AL" },
                  { label: "New York", value: "NY" },
                ]}
></LNSelect>

How can I use the package's functionality to create an Array in the necessary format with label as the name and value as the abbreviation?

Many thanks!

You can use .map

George
– George

2019-11-05 14:13:17 +00:00
Commented Nov 5, 2019 at 14:13 — George
– George, Commented Nov 5, 2019 at 14:13

Fdebijl · Accepted Answer · 2019-11-05 14:15:26Z

2

Transforming arrays is usually done with map. Simply call map on the array of states if it's already provided in that format, or use Object.entries() to transform the object to an array for use with map.

const states = [{
    name: "Alabama",
    abbreviation: "AL",
    territory: false,
    capital: "Montgomery",
    contiguous: true
},
{
    name: "Alaska",
    abbreviation: "AK",
    territory: false,
    capital: "Juneau",
    contiguous: false
},
{
    name: "Wyoming",
    abbreviation: "WY",
    territory: false,
    capital: "Cheyenne",
    contiguous: true
}];

const options = states.map(state => {
  return {
    label: state.name,
    value: state.abbreviation
  }
});

console.log(options);

answered Nov 5, 2019 at 14:15

Fdebijl

1,0907 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yannick K · Accepted Answer · 2019-11-05 14:18:13Z

1

Besides being able to map it yourself just using JS, the documentation specifies you can create a custom format, which for you would be:

var myCustomStates = usStates.format({
    $label: 'name',
    $value: 'abbreviation',
});

Where the '$' translates to the literal string you want, and otherwise the package attempts to link specific values to the key/value (e.g. 'name' would become "New York", and '$name' would simply become 'name').

(For any package, just read the documentation first.)

answered Nov 5, 2019 at 14:18

Yannick K

5,5223 gold badges13 silver badges21 bronze badges

2 Comments

Omar Hussein Over a year ago

I'll be using this but since it's not the direct answer to the question won't be selecting it as the answer. Thank you for pointing out the function exists, my bad :)

Yannick K Over a year ago

Whether you use .map or this, it matters little, but the question was "how can I use the package's functionality to create an Array in the necessary format with label as the name and value as the abbreviation?" ;)

Collectives™ on Stack Overflow

Create Array List dynamically from Javascript Object

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related