How to correctly use a specific array value in react

Question

I am attempting to get API data to correctly display on a react-table. I
am able to get all data to display onto my localhost but some values are not needed. I am thinking that if I were to reference each array specifically, then it would work:

    {objStationD.[""0""].Origin}

The bracket value is what the console says is its property path. I will post the array itself below as a reference point.

The following is my frontend code:

     {this.state.data.map(objStationD =>
      <Table dark>
       <thead>
         <tr>
           <th>Origin</th>
           <th>Due date</th>
           <th>Destination</th>
           <th>Due</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <th scope="row">{objStationD.[""0""].Origin}</th>
           <td>{objStationD.Origintime}</td>
           <td>{objStationD.Destination}</td>
           <td>{objStationD.Duein}</td>
         </tr>
       </tbody>
     </Table>
   )};

This is a snippet of the array returned:

    Array(4)
    0:
    Destination: ["Sligo"]
    Origin: ["Dublin Connolly"]
    Destinationtime: ["14:15"]
    length: 1
    __proto__: Array(0)
   Origintime: ["11:00"]

   1: {Servertime: Array(1), Traincode: Array(1), Stationfullname: Array(1), Stationcode: Array(1), Querytime: Array(1), …}
   2: {Servertime: Array(1), Traincode: Array(1), Stationfullname: Array(1), Stationcode: Array(1), Querytime: Array(1), …}
   3: {Servertime: Array(1), Traincode: Array(1), Stationfullname: Array(1), Stationcode: Array(1), Querytime: Array(1), …}
    length: 4
    __proto__: Array(0)

Have you tried just referencing it by index, something like objStationD[0].Origin? — James Whiteley
– James Whiteley, Commented May 9, 2019 at 11:07
@JamesWhiteley I have tried it but it returns an error saying "unexpected token." — Reggie Snow
– Reggie Snow, Commented May 9, 2019 at 11:27

xadm · Accepted Answer · 2019-05-09 11:04:56Z

1

I am able to get all data to display onto my localhost but some values are not needed.

convert (strip and rename props if required) your data to desired format, f.e. using Array.map method, sth like:

const data = loadedData.map( obj => ({
       origin: obj.[""0""].Origin,
       time: obj.Origintime,
       destination: obj.Destination,
       dueIn:  obj.Duein
     })
)

edited May 9, 2019 at 11:04

answered May 9, 2019 at 10:59

xadm

8,4463 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Reggie Snow Over a year ago

thank you for your response. What I meant by "some values are not needed" is that I only need specific arrays, ie 4 arrays. When I try to display this onto my table it puts all values in, so maybe need to filter which ones are displaying.

xadm Over a year ago

filtering, sorting, pagination? maybe sth like this ?

Collectives™ on Stack Overflow

How to correctly use a specific array value in react

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related