O
O
Oleg Kotov2019-08-21 13:33:39
React
Oleg Kotov, 2019-08-21 13:33:39

How to remove square brackets in filter query when using Table from antd library?

Hello. I'm using Table from https://ant.design/components/table/#components-ta...
and I have a problem with GET parameters of filters
For some reason the request looks like: http://host/filter_name[]=filter_value
Problem in square brackets. My backend provides filters on requests like: http://host/filter_name=filter_value
I googled a lot, crawled through the Issues in their repository and the corresponding tag on SO, but I did not find a single way to override or otherwise change this behavior in an adequate way.
I tried to specify filters in paramslike filter_name: filters.filter_name.toString()
and it worked. But if there are more than 1 filters, then this causes a TypeError exception.
Of course, you can check for the existence of an object and if it exists, apply the option above.
But it looks like quite a crutch. I think there is a better way to do this.
Here is my code:

import React from 'react';
import axios from 'axios';
import { Table } from 'antd';



const columns = [
    {
      title: 'Название',
      dataIndex: 'filterpage_name',
      key: 'name',
      render: (text, record) => <a href={`/crowler/filter-pages/${record.id}`}>{text}</a>,
    },
    {
      title: 'ID',
      dataIndex: 'filterpage_id',
      key: 'id',
    },
    {
        title: 'URL',
        dataIndex: 'filterpage_url',
        key: 'filterpage_url',
        render: text => <a href={`https://sima-land.ru/${text}`} rel="noopener noreferrer" target='_blank' >{text}</a>,
        filters: [{ text: 'Праздники', value: 'prazdniki' }, { text: 'Канцтовары', value: 'kanctovary' }],

      },
      {
        title: 'Активна',
        dataIndex: 'filterpage_is_active',
        key: 'filterpage_is_active',
        filters: [{ text: 'Да', value: '1' }, { text: 'Нет', value: '0' }],

      },
  ];
class FilterpageListView extends React.Component {
    state = {
      data: [],
      pagination: {},
      loading: false,
    };

    componentDidMount() {
      this.fetch();
    }

    handleTableChange = (pagination, filters, sorter) => {
      const pager = { ...this.state.pagination };
      pager.current = pagination.current;
      this.setState({
        pagination: pager,
      });
      this.fetch({
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        // .toString().replace(//g,''),
        filterpage_url: filters.filterpage_url.toString(),
        filterpage_is_active: filters.filterpage_is_active.toString()
      });
      console.log(filters.filterpage_url.toString())
    };

    fetch = (params = {}) => {
      console.log('params:', params);
      console.log('filters', params.filterpage_url);
      this.setState({ loading: true });
      axios.get('http://0.0.0.0:8000/crowler/filterpage/',{
        params: {
          ...params,
        }})
        .then(res => {
        const pagination = { ...this.state.pagination };
        // Read total count from server
        // pagination.total = data.totalCount;
        pagination.total = res.data.count;
        pagination.pageSize = 25
        this.setState({
          loading: false,
          data: res.data.results,
          pagination,
        });
      });
    };

    render() {
      return (
        <Table
          columns={columns}
          dataSource={this.state.data}
          pagination={this.state.pagination}
          loading={this.state.loading}
          onChange={this.handleTableChange}
        />
        )
    }
}

export default FilterpageListView;

Actually, TL;DR:
Their variant passes ...filters as an object, which eventually turns into arrays. And it sends the request in the form:
http://host/filter_name[]=filter_value
and my backend gives filters on the request:
http://host/filter_name=filter_value, that is, without square brackets.
So I need to overwrite this behavior.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question