Using JSON returned from an API to populate a variable used by a React-Table table component

Question

I'm trying to write this React component that connects to an API that returns JSON.

The API returns JSON results that look like this small example:

JSON:

{
    "id": 22,
    "gameTitle": "The Haunted Plains II",
    "startDate": "2020-03-31T12:49:50.009",
    "endDate": "2020-04-04T04:00:00",
    "description": "A simple bitmap style RPG",
    "gameUrl": "https://yourgames.org/1/55/3",
    "isOpen": true,
    "gameFaqId": 25,
    "gameTypeId": 3,
    "gameCharClasses": ["Bard", "Theif", "Warrior", "Wizard", "Cleric"]
},

{
    "id": 25,
    "gameTitle": "Downhill Mountain Biking Pro",
    "startDate": "2020-02-12T11:22:30.011",
    "endDate": "2020-05-02T03:11:00",
    "description": "A side-scrolling, downhill mountaining biking game",
    "gameUrl": "https://yourgames.org/3/43/6",
    "isOpen": true,
    "gameFaqId": 11,
    "gameTypeId": 6,
    "gameCharClasses": ["Beginner", "Pro", "Super Star"]
}

I want to put the data into the 'gameListing' variable that have defined as 'const gameListing'.

Then I have a function called makeData that is called by the main app which is using a React library called 'react-table'.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const [data, setData] = useState([]);

useEffect(() => {
    const fetchData = async () => {
        const result = await axios(
            'https://localhost:44376/api/projects',
        );
        setData(result.data);
    };
    fetchData();
}, []);

const range = len => {
  const arr = [];
  for (let i = 0; i < len; i++) {
    arr.push(i);
  }
  return arr;
};

const gameListing = data.map(g => {
  return {
    id: g.id,
    gameTitle: g.gameTitle,
    startDate: g.startDate,
    endDate: g.endDate,
    description: g.description,
    gameUrl: g.gameUrl,
    isOpen: g.isOpen,
    gameFaqId: g.gameFaqId,
    gameCharClasses: g.gameCharClasses
  };
});

export default function makeData(lens = [2]) {
  const makeDataLevel = (depth = 0) => {
    const len = lens[depth]
    return range(len).map(d => {
      return {
        ...gameListing(),
        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
      }
    })
  }

  return makeDataLevel()
}

The problem is, after hours of debugging, I can't get it to work.

My latest issue is that it's not displaying any data.

Here is a Code Sandbox: https://codesandbox.io/s/trusting-booth-b7wxg

user11891640 · Accepted Answer · 2020-04-01 17:07:32Z

1

I see one problem is youre using .map wrong you have to pass in a parameter and that parameter is basically like a placeholder to use that has the data within it https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map for example:

const gameListing = data.map((elem) => {
  return {
    id: elem.id,
    gameTitle: elem.gameTitle,
    startDate: elem.startDate,
    endDate: elem.endDate,
    description: elem.description,
    gameUrl: elem.gameUrl,
    isOpen: elem.isOpen,
    gameFaqId: elem.gameFaqId,
    gameCharClasses: elem.gameCharClasses
  }
})

Does that help or work?

answered Apr 1, 2020 at 17:07

user11891640

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

7 Comments

SkyeBoniwell Over a year ago

Thanks I did fix that part in the Code Sandbox. But now I'm getting an error, "gameListing" is not a function...

user11891640 Over a year ago

thats weird ill look at it now sorry for the slow response

user11891640 Over a year ago

Oh yeah on line 70 remove the () in front of gameListing right now you have it like this ``` ...gameListing() ``` just remove the ()

user11891640 Over a year ago

ohhh when i console.log(gameListing) it returned [object, object] imma check out why its doing that

user11891640 Over a year ago

i see why its doing that. the [object, object] means its an array of two objects. So in order to get the data you're gonna have to pick one like this 'gameListing[0].gameTitle' since its an array of 2 objects. its kinda weird, you may have to step thru your code and reorganize it

|

Collectives™ on Stack Overflow

Using JSON returned from an API to populate a variable used by a React-Table table component

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related