Mapping data returned from NFT API

[fresco]

I’m having trouble mapping data from the NFT API in react.js

Essentially the goal here is to map the result from the API into react to be shown on the browser.
Other goals are at hand but I’ll settle on this issue first (:

I’m sure I’m overlooking something and there’s a mistake made somewhere but I haven’t been able to identify what could be wrong with the issue and with limited time I’ve only had so many trials to run.

The code is as follows:
“/App.js”

import "./App.css";
import { useState } from "react";
import { useMoralisWeb3Api } from "react-moralis";

// 0x88b38FDd8d1671f49263541534C0d6FDd002023B
// 0xeF87529Ca9c67a849bD7013837fC42d4DE92ca82 -- Goonz Portal

function App() {
  const Web3Api = useMoralisWeb3Api();

  const [Goonz, setGoon] = useState();

  const fetchAllTokenIds = async () => {
    const options = {
      address: "0xeF87529Ca9c67a849bD7013837fC42d4DE92ca82",
    };
    const NFTs = await Web3Api.token.getAllTokenIds(options);
    setGoon(NFTs);
    console.log(NFTs.result[0]);

  };
  return (
    <div className="App">
      <button onClick={fetchAllTokenIds}>Click Me</button>
      <h1>DATA</h1>
      {/* <ol>
        {Goonz.map(Goonz => {
          return <li>{Goonz.token_id}</li>;
        })}
      </ol> */}
    </div>
  );
}

export default App;

[cryptokid]

I think that you can use isInitialized and useEffect

any error that you get?

does that console.log work for you?

@fresco

console.log(NFTs.result[0]);

maybe this thread helps:

You need to call Moralis start

Hey. I get an error “You need to call Moralis start with appId before using Moralis”. I tried to use useEffect with isInitialized but i didnt work for this component. What should i do to get rid of this error? I use isInitialized in other components and they all work fine. My goal is if the current user is the owner of contract, it could see the tab and its content otherwise couldnt. const Interaction = () => { const [key, setKey] = useState(''); const { Moralis, isInitialized, user, log…

[fresco]

So I tried using useEffect and my screen wouldnt display blank.

As for the console.log, yes it displays the information I need, I just selected one of the items returned to test with

[cryptokid]

ok, maybe there is something with that syntax:

@fresco

      {/* <ol>
        {Goonz.map(Goonz => {
          return <li>{Goonz.token_id}</li>;
        })}
      </ol> */}

[fresco]

I get these errors when I uncomment that mapping detail:

i added useEffect and im not getting an error but i submitted it as so:

function App() {
  const Web3Api = useMoralisWeb3Api();
  const [Goonz, setGoon] = useState();

  const fetchAllTokenIds = async () => {
    const options = {
      address: "0xeF87529Ca9c67a849bD7013837fC42d4DE92ca82",
    };
    const NFTs = await Web3Api.token.getAllTokenIds(options);
    setGoon(NFTs);
    console.log(NFTs.result[0]);
  };

  useEffect(() => {
    fetchAllTokenIds()
  }, [])

[cryptokid]

maybe you have to add something else to that setGoon(NFTs), maybe you want to add only the results there and not the entire object

[fresco]

yeah i changed it to

setGoon(NFTs.result[0]);

and still not much has changed.

I tried setting the

const [Goonz, setGoon] = useState();

to const [Goonz, setGoon] = useState([]);

and i noticed that the Goonz is stated as const Goonz: never[]

which is better than undefined at least

[cryptokid]

@fresco

setGoon(NFTs.result[0]);

this doesn’t like it would have a map function either, try to use console.log(JSON.stringify(Goonz)) to see what you get

[fresco]

so I attempted like this:

function App() {
  const Web3Api = useMoralisWeb3Api();
  const [Goonz, setGoon] = useState([]);

  useEffect(() => {
    setGoon()
  });
  const fetchAllTokenIds = async () => {
    const options = {
      address: "0xeF87529Ca9c67a849bD7013837fC42d4DE92ca82",
    };
    const NFTs = await Web3Api.token.getAllTokenIds(options);
    setGoon(NFTs.result[0]);
    console.log(JSON.stringify(NFTs.result[0]))

and i get the json version on console. Thats fine

But I still have to comment out the

{/* <ol>
        {Goonz.map((Goonz) => {
          return <li>{Goonz.token_id}</li>;
        })}
      </ol> */}

because i remain with the same error on console… there has to be something wrong being mapped and Im not sure what it is

[cryptokid]

I mean, to try to use console.log in that code that is commented there.

[fresco]

function App() {
  const Web3Api = useMoralisWeb3Api();
  const [Goonz, setGoon] = useState();

  useEffect(() => {
    setGoon();
  }, []);
  const fetchAllTokenIds = async () => {
    const options = {
      address: "0xeF87529Ca9c67a849bD7013837fC42d4DE92ca82",
    };
    const NFTs = await Web3Api.token.getAllTokenIds(options);
    setGoon(NFTs.result[0]);
    console.log(NFTs.result[0]);
  };

  return (
    <div className="App">
      <button onClick={fetchAllTokenIds}>Click Me</button>
      <h1>DATA</h1>
      <ol>
        {NFTs.map((NFTs) => {
          return <li>{NFTs.token_id}</li>;
        })}
      </ol>
    </div>
  );
}

export default App;

When I change Goonz.map and forget about the useState:

    const NFTs = await Web3Api.token.getAllTokenIds(options);
    setGoon(NFTs.result[0]);
    console.log(NFTs.result[0]);
  };

  return (
    <div className="App">
      <button onClick={fetchAllTokenIds}>Click Me</button>
      <h1>DATA</h1>
      <ol>
        {NFTs.map((NFTs) => {
          return <li>{NFTs.token_id}</li>;
        })}
      </ol>
    </div>
  );
}

export default App;

I get 'NFTs' is not defined Im thinking that it doesnt store

[cryptokid]

I mean, to use that Goonz variable in that code, try to log it with console.log

[alex]

.map is not a function error means you’re trying to use map on a variable that is not an array.

Your code works fine if you set your state with all results instead of using the first result e.g.

function Fresco() {
  const { isInitialized } = useMoralis();
  const Web3Api = useMoralisWeb3Api();
  const [Goonz, setGoon] = useState([]);

  const fetchAllTokenIds = async () => {
    const options = {
      address: '0xeF87529Ca9c67a849bD7013837fC42d4DE92ca82',
    };
    const NFTs = await Web3Api.token.getAllTokenIds(options);
    setGoon(NFTs.result);
  };

  useEffect(() => {
    if (isInitialized) {
      fetchAllTokenIds();
    }
  }, [isInitialized]);

  return (
    <ol>
      {Goonz.map((Goonz) => {
        return <li key={Goonz.token_id}>{Goonz.token_id}</li>;
      })}
    </ol>
  );
}

[fresco]

brilliant, yeah I got it to work now. Im sure it was the fact that I was returning the result for one (reason being i was trying to test) I really appreciate the help i was a bit cloudy trying to think this through

[fresco]

I tried switching over the function to getNFTsForContract. But for some reason now, even with the identical code with only changes being the function. It doesnt display the information and returns an empty array? Not sure why it wouldnt work as prior.

Heres the code now

function App() {
  const { isInitialized } = useMoralis();
  const Web3Api = useMoralisWeb3Api();
  const [Goonz, setGoon] = useState([]);

  const fetchNFTsForContract = async () => {
    const options = {
      token_address: "0xeF87529Ca9c67a849bD7013837fC42d4DE92ca82",
    };
    const NFTs = await Web3Api.account.getNFTsForContract(options);
    setGoon(NFTs.result);
    console.log(NFTs.result);
  };
  useEffect(() => {
    if (isInitialized) {
      fetchNFTsForContract();
    }
  }, [isInitialized]);

  return (
    <div className="App">
      <button onClick={fetchNFTsForContract}>click</button>
      <h1>Goonz Leaderboard</h1>
      <div className="table_container">
        <table>
          <thead>
            <tr>
              <th>Goon ID</th>
              <th>Owner</th>
              <th>Time</th>
            </tr>
          </thead>
          <tbody>
            {Goonz.map((Goonz) => (
              <tr key={Goonz.token_id}>
                <td>{Goonz.token_id}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

[cryptokid]

@fresco

const options = {
      token_address: "0xeF87529Ca9c67a849bD7013837fC42d4DE92ca82",
    };

What is the chain where you intend to run this?

[fresco]

ethereum, I decided to just go with the fetchNFTOwners function as it serves the same purpose and returns what I need accordingly. Now I’m on another issue but I think I should close this forum out and start a new one to not fill it up with another issue

[alex]

getNFTsForContract also requires a parameter of address to filter the results by that address, but it’s the wrong one to use if you want all NFTs + owners.