Access nested JSON in React table

Question

I want to display nested JSON data in a react-table.

I tried it like this:

   render() {
    const columns = [{
     //Not Displaying
      Header: 'Owner ID',
      id: 'ownerid',
      accessor: '_links.customer.href.ownerid', // <- i think this is wrong
      Cell: this.renderEditable
    }, 

    {
      //Displaying
      Header: 'Price',
      accessor: 'price',
      Cell: this.renderEditable
    }, {

The data i am getting back and have bound to the table is structured as follows:

[
    {
        "id": 1,
        "date": "20.07.2019",
        "price": 3.2,
        "customer": {
            "ownerid": 1,
            "firstname": "John",
            "lastname": "Johnson"
        }
    }
]

Here i am using the columns array:

import ReactTable from "react-table";

<ReactTable data={this.state.offers} columns={columns} 
          filterable={true} pageSize={10}/>

Binding the data:

fetchOffers = () => {
        const token = sessionStorage.getItem("jwt");
        fetch(SERVER_URL + 'api/offers',
        {
          headers : {'Authorization':token}
        })
        .then((response) => response.json())
        .then((responsteData) => {
          this.setState({
            offers: responsteData._embedded.offers,
          });

          console.log(this.state);
        })
        .catch(err=> console.error(err));
      }

The data i am using after binding:

i use it in a react-table component, i will add it to the question. — M.Dan, Jul 22 '19 at 22:36
where is `_links.customer.href.ownerid` in the data? shouldn't the `accessor` just be `'customer.ownerid'` — John Ruddell, Jul 22 '19 at 22:41
i tried that but that also didn't work. I just postet my last try the '_links_customer.href_ownerid' is from the console when i log the state after binding the JSON. I will add that also to the question. — M.Dan, Jul 22 '19 at 22:44
can you just post the exact data set you are using? also what is `this.renderEditable`, [**because currently i dont see any issues, when mapping the data**](https://codesandbox.io/s/react-table-simple-table-jvnnm) — John Ruddell, Jul 22 '19 at 22:45
this is exactly the data i am using. interesting i will investigate your example further. thanks for that. — M.Dan, Jul 22 '19 at 22:52
I'm not specifying a `Cell`, why do you need to? And when you say this is the data, what is? the json you posted or the image? you have two different data formats in your question. if its the image then it should be something like `'_links.customer.href'` — John Ruddell, Jul 22 '19 at 22:53
Because my Cells are editable. Maybe it has something to do how i bind the data to the array? I will also add that to the question. — M.Dan, Jul 22 '19 at 22:54
@JohnRuddell i figured it out thanks to your example thank you very much! — M.Dan, Jul 23 '19 at 00:16

score 8 · Answer 1 · edited Sep 02 '21 at 07:06

8

Check the Accessors documentation. It has several examples for complex data structure. I don't see _links or href in your sample data. So I think that you need just:

accessor: 'customer.ownerid'

The data structure from the console screenshot doesn't match your sample data. And it doesn't seem to contain ownerid. Try accessor: '_links.customer.href' to check whether it outputs anything to the table.

edited Sep 02 '21 at 07:06

mababin

193
4
16

answered Jul 22 '19 at 22:47

UjinT34

4,784
1
12
26

I thought that also, should have mentioned that i already tried that. It is still not displaying. – M.Dan Jul 22 '19 at 22:48
Data from the console doesn't match your sample data structure. – UjinT34 Jul 22 '19 at 22:55
The data i posted is when i call my API from postman in JSON format. The data i posted is after binding. I edited the question. – M.Dan Jul 22 '19 at 22:56

score 1 · Answer 2 · answered Jul 23 '19 at 00:16

I figured it out.

I called the endpoint "localhost:8080/api/offers" and saved the following response:

"offers": [
            {
                "date": "20.07.2019",
                "price": 3.2,
                "_links": {
                    "self": {
                        "href": "http://localhost:8080/api/offers/1"
                    },
                    "offer": {
                        "href": "http://localhost:8080/api/offers/1"
                    },
                    "customer": {
                        "href": "http://localhost:8080/api/offers/1/customer"
                    }
                }
            }
        ]

there is no customer object

But when i call "localhost:8080/offers" i get:

[
    {
        "id": 1,
        "date": "20.07.2019",
        "price": 3.2,
        "customer": {
            "ownerid": 1,
            "firstname": "John",
            "lastname": "Johnson"
        }
    }
]

i changed the URI in my project and now the number is displaying.

I still don't know why i get data from "../api/offers" but i will research.

Ah, called the wrong api method :3. I'd look at where you define the api routes on the server and see what that is for if you dont know :) — John Ruddell, Jul 23 '19 at 00:19

score 1 · Answer 3 · answered Nov 11 '21 at 23:37

I had to access a nested object and display it with some styling, and this ended up working for me:

(Note: I was using typescript, so some of the typing might not be necessary)

{
  Header: 'Thing To Display',
  accessor: 'nested.thing.to.display',
  Cell: ({ row }: { row: Row }) => (
    <p>{row.values['nested.thing.to.display']}</p>
  ),
}

Access nested JSON in React table

3 Answers3