Как отправить ответ Json в пустую таблицу проектирования муравьев?

Я новичок в реагировании и хочу отправить свой json-ответ, который я получил от API, в пустую таблицу ant-design, и я понятия не имею, как это сделать?

я уже сопоставил идентификатор с именем, но также хочу, чтобы все остальные столбцы и формат таблицы муравьиного дизайна.

JSon-ответ

[
    {
        "id": 9685,
        "name": "Mukesh  Rai",
        "count of sub": 3,
        "count of int": 2,
        "count of po": null
    },
    {
        "id": 2085,
        "name": "Abhyudaya Singh Panwar",
        "count of sub": 1049,
        "count of int": 17,
        "count of po": 5
    },
    {
        "id": 7087,
        "name": "Amit Kumar Sharma",
        "count of sub": 363,
        "count of int": 68,
        "count of po": 10
    },
    {
        "id": 2100,
        "name": "Aditya Kumar",
        "count of sub": 724,
        "count of int": 5,
        "count of po": 1
     }
]

файл компонента

  componentDidMount(){
    axios.get("http://127.0.0.1:8000/marketer_details/")
      .then(response=>{
        console.log(response)
        this.setState({posts: response.data})
      })
      .catch(error=> {
        console.log(error)
      })
    }

render() {
    const { posts } = this.state
    return(
      <div>
        List of Posts
        {
          posts.length ?
          posts.map(post => <div key = {post.id}>{post.name}</div>) : 
          null
        }
      </div>
    )

// Нужны и все остальные столбцы

    render(){
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        width: '30%',
        ...this.getColumnSearchProps('name'),
      },
      {
        title: 'Count of Submissions',
        dataIndex: 'Count',
        key: 'sub',
        width: '20%',
        ...this.getColumnSearchProps('sub'),
      },
      {
        title: 'Count of Interviews',
        dataIndex: 'Count',
        key: 'int',
        ...this.getColumnSearchProps('int'),
      },
      {
        title: 'Count of PO',
        dataIndex: 'Count',
        key: 'po',
        ...this.getColumnSearchProps('po'),
      },
    ];
    return <Table columns={columns} dataSource={this.state.posts} />;
  }
}
}
export default App

Я не могу понять, как можно выполнить множественное сопоставление для каждой строки столбца.


reactjs json axios
person Hrithik Baishakhiya    schedule 17.06.2019    source источник
comment
Почему у вас есть два оператора return для функции?   -  person Agney    schedule 17.06.2019
comment
Извините, я пытался изобразить то, что уже сделал, и это не было разделено на части.   -  person Hrithik Baishakhiya    schedule 17.06.2019
comment
Dataindex должен соответствовать имени свойства вашего json. И добавьте еще один флаг loading: true в вашем состоянии и установите для него значение false, когда данные были загружены... Первоначально ваши данные показывают загрузку, и как только вы получите данные из бэкэнда, они отобразят данные ‹ Столбцы таблицы={столбцы} loading={this.state.loading} dataSource={this.state.posts} /›   -  person Hemanthvrm    schedule 17.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

Компонент Table принимает в качестве аргумента структуру столбцов.

Здесь dataIndex относится к индексу в данных, на которые следует ссылаться для столбца, key предназначен для того, чтобы оставаться уникальным для имен столбцов.

В вашем случае массив столбцов может быть:

const columns = [
    {
      name: "Name",
      dataIndex: "name"
    },
    {
      name: "Count of submissions",
      dataIndex: "count of sub"
    },
    {
      name: "Count of interviews",
      dataIndex: "count of int"
    },
    {
      name: "Count of PO",
      dataIndex: "count of po"
    }
  ];

Демонстрация Codesandbox

person Agney    schedule 17.06.2019
comment
Но дело в том, как передать необработанные данные json в эти столбцы ?? Должен ли я перебирать список и нажимать данные или есть другой способ сделать это?? - person Hrithik Baishakhiya; 17.06.2019
comment
Это то, для чего вы используете поле dataSource, подавайте необработанный json в это поле. - person Agney; 17.06.2019
comment
Вам не нужно ничего делать, этот атрибут dataSource={this.state.posts} позаботится - person Hemanthvrm; 17.06.2019
comment
но я думаю, что он не будет извлекать данные из API и помещать их в последующие столбцы. - person Hrithik Baishakhiya; 17.06.2019
comment
@RithikBaishakhiya так и будет - person Agney; 17.06.2019