How to map this data to a json array within React?

Question

I have a Rest API which returns data in json of the form :

["1.6.3","1.6.4","1.6.5","1.6.6","1.7.0","1.7.2"]

I need the data in this format:

var options = [{ value: 'one', label: 'One' }, { value: 'two', label: 'Two', clearableValue: false }
 ];

After fetching the data I am using the following code to map the data in the required format:

if (this.state.coreversions) {
                var options = [
                    this.state.coreversions.map(versions =>
                        `{ value: '${versions}', label: '${versions}' },`
                    )
                ];
            }

Here the variable version is equal to a single value of the data returned by the Rest API

Any help would be appreciated.

Pineda · Accepted Answer · 2017-06-29 23:47:39Z

2

Array#map returns an array, therefore you do not have to enclose it within square brackets.

Amend your code as follows:

if (this.state.coreversions) {
  var options = this.state.coreversions.map(
    versions => ({value: versions, label: versions})
  );
}

// simplified this.state.coreversions to just coreversions
// only for the purposes of this snippet
var coreversions = ["1.6.3","1.6.4","1.6.5","1.6.6","1.7.0","1.7.2"];

if (coreversions) {
  var options = coreversions.map(
    versions => ({value: versions, label: versions})
  );
}

console.log(options);

// logs out an array of objects:
//  [
//    { value: '1.6.3', label: '1.6.3' },
//    { value: '1.6.4', label: '1.6.4' },
//    { value: '1.6.5', label: '1.6.5' },
//    { value: '1.6.6', label: '1.6.6' },
//    { value: '1.7.0', label: '1.7.0' },
//    { value: '1.7.2', label: '1.7.2' }
//  ]

edited Jun 29, 2017 at 23:47

answered Jun 29, 2017 at 23:07

Pineda

7,5933 gold badges34 silver badges47 bronze badges

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

1 Comment

Pineda Over a year ago

Amended the syntax to remove the unnecessary return statement

terpinmd · Accepted Answer · 2017-06-29 23:14:25Z

0

I think your map function is returning an array of strings instead of objects. Should be like:

return { value: '${versions}', label: '${versions}' }

Note how the above does not have the ticks surrounding the entire line.

answered Jun 29, 2017 at 23:14

terpinmd

1,0189 silver badges16 bronze badges

Comments

ojathelonius · Accepted Answer · 2017-06-29 23:14:27Z

0

React-Select expects an array of objects, not an array of strings.

You can loop through the data, put these values in a object and push it in an array like the following:

var results = ["1.6.3", "1.6.4", "1.6.5", "1.6.6", "1.7.0", "1.7.2"];

var selectData= [];

for (result of results) {
  selectData.push({
    value: result,
    label: result
  });
}

console.log(selectData);

answered Jun 29, 2017 at 23:14

ojathelonius

91412 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to map this data to a json array within React?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related