Динамически генерировать список из json данных в ответ

Question

Я использую primereact для создания таблицы, и я хотел реализовать ColToggle Вот link https://www.primefaces.org/primereact/#/datatable/coltoggle. Поскольку я динамически генерирую столбцы из JSON Server, я хочу динамически генерировать этот раскрывающийся список для реализации ColToggle, потому что я беру api url из пользовательского ввода в populate the dropdown:

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

и это вот что я пытаюсь сделать:

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);
            });

См. функцию Map в коде. JSON link: http://myjson.com/1620im.

Это должен быть мой вывод:

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

Как я могу это сделать?

Answer 1

Возможно, вы ищете это,

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

Answer 2

После ответа @Jadip раскрывающийся список был заполнен правильно, но при снятии отметки со столбцов в раскрывающемся списке он не исчез.

Проблема решена. Я не генерировал столбцы в новом состоянии, установленном раскрывающимся списком.

Предыдущий:

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

Сейчас:

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

Answer 3

Вы на самом деле не обновляете состояние с помощью этой функции сопоставления, поэтому реакция не знает о повторном отображении.

например,

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

Вместо этого , попробуйте это

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

Всякий раз, когда в состояние вносится изменение, реакция соответственно обновляет dom.

На несвязанной ноте я бы рекомендовал использовать .foreach l oop вместо карты, если вы не возвращаете значение. Нет необходимости выделять дополнительную память.

Answer 4

Измените ваше отображение на это

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