Dynamically generate list from json data in react

Question

I am using primereact to generate table and i wanted to implement ColToggle Here is the link https://www.primefaces.org/primereact/#/datatable/coltoggle. Since I am dynamically generating columns from JSON Server , I want to dynamically generate this dropdown list for ColToggle implementation because i am taking api url from user input, to populate the dropdown:

let columns = [
            {field: 'vin', header: 'Vin'},
            {field: 'year', header: 'Year'},
            {field: 'brand', header: 'Brand'},
            {field: 'color', header: 'Color'}
        ];

and this is what i am trying to do:

fetch(this.state.apiURL)
            .then((response) => response.json())
            .then((findresponse) =>{
                this.setState({
                    columnSelector: findresponse.rootHeader
                });
                console.log(this.state.columnSelector);
                this.state.columnSelector.map((col) => {
                    return this.columns_multiselect = [{field: col.field, header: col.header}];
                })
                console.log(this.columns_multiselect);
            });

See the Map function in the code. JSON link: http://myjson.com/1620im.

This should be my output:

           [
                {field: 'vin', header: 'Vin'},
                {field: 'year', header: 'Year'},
                {field: 'brand', header: 'Brand'},
                {field: 'color', header: 'Color'}
            ];

How can i do this?

What is your error? and if you are using service then what is your response look like? Do you want to generate object from response? — Niraj, Feb 11 '20 at 07:58
See the Link above of Coltoggle, everything is written inside constructor which is hard coded. I want to dynamically generate the list which will be populated. And i want this list to be generated by json data. Please look into json data. I have provided the link. — Anish Arya, Feb 11 '20 at 08:04

score 1 · Accepted Answer · answered Feb 11 '20 at 08:11

1

You may be looking for this,

this.columns_multiselect = this.state.columnSelector.map(col => ({field: col.field, header: col.header}))

answered Feb 11 '20 at 08:11

Jaydip Jadhav

12,179
6
24
40

score 0 · Answer 2 · answered Feb 11 '20 at 08:10

0

Change your mapping to this

this.columns_multiselect = this.state.columnSelector.map((col) => {
    return {field: col.field, header: col.header};
});

answered Feb 11 '20 at 08:10

karlmarxlopez

1,019
1
8
16

score 0 · Answer 3 · answered Feb 11 '20 at 08:16

You're not actually updating the state with this mapping function so react doesn't know to rerender.

e.g.

this.state.columnSelector.map((col) => {
  return this.columns_multiselect = [{field: col.field, header: col.header}];
})

Instead, try this

this.setState({
  columnOpts: this.state.columnSelector.map(col => ({
    label:col.header,
    value: { field:col.field, header: col.header }
    })
  )
})
...
<MultiSelect value={...} options={this.state.colOptions} .../>

Whenever a change is made to state, react will update the dom accordingly.

On an unrelated note, I would recommend using the .foreach loop instead of map if you're not returning a value. No need allocating extra memory.

that threw an error in ' : ' after value and header. ' ; ' expected — Anish Arya, Feb 11 '20 at 09:03

score 0 · Answer 4 · answered Feb 12 '20 at 06:23

After the answer by @Jadip, the dropdown list was populated correctly but on unchecking the columns from the dropdown list, it did not disappeared.

The issue is solved. I was not generating columns on the newly state set by dropdown list.

        var columns = this.state.jsonData.rootHeader.map((col,i) => {
            return <Column key={i} field={col.field} header={col.header} sortable={this.state.isSortable} />;
        });

Now:

        var columns = this.state.cols.map((col,i) => {
            return <Column key={i} field={col.field} header={col.header} sortable={this.state.isSortable} />;
        });

Dynamically generate list from json data in react

4 Answers4