Fetching Array of Arrays from API ReactJs

Question

Hello Guys! Hope you are fine I am new to react. I have an endpoint in spring boot and it return me an array of arrays (according to my need). but the problem is when I try to display it on react, it gives me an undefined error.

My API data will look like this;

[
 [
   2,
   "fa ",
   23,
  "fajhfl",
  "2021-07-20T06:44:19.000+00:00"
 ],
 [
  4,
  "amdflk",
  35,
  "lafjoil",
  "2021-07-21T06:44:43.000+00:00"
 ],
 [
  5,
  "fasdf",
  88,
  "fajhfl",
  "2021-07-22T06:44:52.000+00:00"
 ],
 [
  6,
  "nm",
  98,
  "faldjf",
  "2021-07-23T06:45:04.000+00:00"
 ]

]

My spring boot code is correct with proper use of Cross-origin but for question clarification, I put the Item controller code.

@RestController
@RequestMapping("/items")
@CrossOrigin(origins = "http://localhost:3000", allowedHeaders = "*")
public class ItemController {

    @Autowired
    private ItemService itemService;

    // Get all Items
    @GetMapping("/getItems")
    ResponseEntity<Object> getItems(){
        Object allItems = itemService.getAllItems();
        if(allItems == null){
            return ResponseEntity.noContent().build();
        }else{
            return ResponseEntity.ok(allItems);
        }
    }
}

Now In react I try to fetch it give me an undefined error,

<tbody className={tableStyle.tableBody}>
                    {props.body.map((key) => {
                        props.body[key].map((i, v) => {
                            return (
                                <tr>
                                    <td key={i}>{v}</td>
                                </tr>
                            );
                        });
                })}

But seeing this answer, I get the same error

TypeError: props.body[key].map is not a function
(anonymous function)
D:/My programming/React JS/Stock Register Managment System/srms/src/Components/GeneralTable/Table.jsx:30
  27 | </thead>
  28 | <tbody className={tableStyle.tableBody}>
  29 |  {Object.keys(props.body).map((key) => {
> 30 |      props.body[key].map((i, v) => {
     | ^  31 |          return (
  32 |              <tr>
  33 |                  <td key={i}>{v}</td>

Thanks In Advance:)

You have array of arrays, use props.body.map instead of Object.keys(props.body).map — Hassan Imam
– Hassan Imam, Commented Jul 22, 2021 at 4:49
I already use but I want to fetch its data, not just the whole array. — Feezan Khattak
– Feezan Khattak, Commented Jul 22, 2021 at 4:53

Siva Kondapi Venkata · Accepted Answer · 2021-07-22 09:40:08Z

1

Try something like below

const data = [
  [2, "fa ", 23, "fajhfl", "2021-07-20T06:44:19.000+00:00"],
  [4, "amdflk", 35, "lafjoil", "2021-07-21T06:44:43.000+00:00"],
  [5, "fasdf", 88, "fajhfl", "2021-07-22T06:44:52.000+00:00"],
  [6, "nm", 98, "faldjf", "2021-07-23T06:45:04.000+00:00"],
];

const Component = (props) => {

  if (!props.data || 
    !Array.isArray(props.data) || 
    props.data.length < 1 || 
    !Array.isArray(props.data[0])) {
   return <div> No results </div>
  }

  return (
    <table>
      {props.data.map((row) => (
        <tr>
          {row.map((col) => (
            <td key={col}>{col}</td>
          ))}
        </tr>
      ))}
    </table>
  );
};

ReactDOM.render(<Component data={data} />, document.getElementById("app"))

ReactDOM.render(<Component data={[]} />, document.getElementById("app2"))

ReactDOM.render(<Component data={['some']} />, document.getElementById("app3"))

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>


<div id="app"></div>

<div id="app2"></div>

<div id="app3"></div>

edited Jul 22, 2021 at 9:40

answered Jul 22, 2021 at 4:54

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

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

3 Comments

Feezan Khattak Over a year ago

When I run on time its correct all data is shown correctly but when I run it secondly it give me the same error i.e. row.map is not a function

Siva Kondapi Venkata Over a year ago

Most likely that, next time data is not coming as array of array. Before return, check for condition if data is not array or array show the empty div.

Siva Kondapi Venkata Over a year ago

@FeezanKhattak, Updated the answer. Check the snippet.

Prakash · Accepted Answer · 2021-07-22 05:10:22Z

1

That's because you are trying to access key from an anonymous. You can directly use key.map() instead of an anonymous find > props.body[key]

Please see below:

<tbody className={tableStyle.tableBody}>
                        {props.body.map((key) => {
                            key.map((i, v) => {
                                return (
                                    <tr>
                                        <td key={i}>{v}</td>
                                    </tr>
                                );
                            });
                    })}

answered Jul 22, 2021 at 5:10

Prakash

213 bronze badges

1 Comment

Feezan Khattak Over a year ago

When I run on time its correct all data is shown correctly but when I run it secondly it gives me the same error i.e. row.map is not a function

Collectives™ on Stack Overflow

Fetching Array of Arrays from API ReactJs

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related