Create table with Moralis DB data

[eedinson]

Hello, I created a new class on a Moralis server and inserted some test data rows. Now I want to fetch different columns of this class and all data rows of the selected columns and put them in a JS data table.

For testing puposes, I actually map some mock data from a json file to the table elements.
Now I am trying to replace the mock table data with the Moralis class data. For that I tried querying the DB, but obviously I am not using the correct code lines.

Does anyone have an advice?
…

import data from "../mock-data.json";

const TopTable = () => {
  const { Moralis, account } = useMoralis();
  const user = Moralis.User.current();
  const [parts, setParts] = useState(data);

  async function getData() {
    const CreateTable = Moralis.Object.extend("CreateTable");
    const query = new Moralis.Query(CreateTable);
    query.equalTo("ethAddress", account);
    const result = await query.first();
  } 

  return (
    <div className="tableContent">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Date</th>
            <th>PartOrderer</th>
            <th>PartTitle</th>
          </tr>
        </thead>
        <tbody>
          {parts.map((part) => (
            <tr>
              <td>{part.id}</td>
              <td>{part.date}</td>
              <td>{part.partOrderer}</td>
              <td>{part.partTitle}</td>
            </tr>
          ))}
        </tbody>
      </table>

[YosephKS]

Hey @eedinson you shouldn’t use query.first, it will fetch the first data

to fetch all use query.find

[Maki]

@eedinson

 const CreateTable = Moralis.Object.extend("CreateTable");
    const query = new Moralis.Query(CreateTable);
    query.equalTo("ethAddress", account);
    const result = await query.first();

This looks fine, if you have ethAddress field in your table if not you don’t need to add that. To replace your table data with what is saved in the DB.

async function getData(){
    const CreateTable = Moralis.Object.extend("CreateTable");
    const query = new Moralis.Query(CreateTable);
    query.equalTo("ethAddress", account);
    const result = await query.first();
   // update your parts with the fetched data
    setParts(result)
}
  
// you should call your getData() function inside useEffect() also.

[eedinson]

Thank you very much. That helps me a lot.
Using query.first() on one row of data works now. But when I change it to query.find() I can’t fetch any data.

I think it might be a JS issue in my code because the Moralis part should be fine now.

[Maki]

It should work, can you send the code snapshot.

[eedinson]

Here is the code that works with query.first() but not with query.find()

const TopTable = () => {
  const { Moralis, account } = useMoralis();
  const user = Moralis.User.current();

  const [date, setDate] = useState();
  const [partOrderer, setPartOrderer] = useState();
  const [partTitle, setPartTitle] = useState();

  useEffect(() => {
    async function getData() {
      const CreateTable = Moralis.Object.extend("CreateTable");
      const query = new Moralis.Query(CreateTable);
      query.equalTo("ethAddress", account);
      const result = await query.first();
      const { date, partOrderer, partTitle } = result.attributes;
      setDate(date);
      setPartOrderer(partOrderer);
      setPartTitle(partTitle);
    }
    getData();
  });

  return (
    <div className="tableContent">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Date</th>
            <th>PartOrderer</th>
            <th>PartTitle</th>
          </tr>
        </thead>
        <tbody>
//I discarded the mapping here because I thought I could use query.find() to list all the data rows off each column..
          <tr>
            <td>{id}</td>
            <td>{date}</td>
            <td>{partOrderer}</td>
            <td>{partTitle}</td>
          </tr>
        </tbody>
      </table>

[qudusayo]

@eedinson

Here is the code that works with query.first() but not with query.find()

query.first() will return an object to you, that’s why you’re able to get the attribute directly, but query.find() will return array of objects or empty array if no data is gotten and you’ll have you access needed object based on its index

[alex]

You can log result to find out what sort of data you’re working with. Here is an example:

const TopTable = () => {
  const { isInitialized } = useMoralis();
  const [parts, setParts] = useState([]);

  async function getData() {
    const CreateTable = Moralis.Object.extend('_AddressSyncStatus');
    const query = new Moralis.Query(CreateTable);

    const result = await query.find();

    setParts(result);

    console.log('result', result);
  }

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

  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Chain</th>
          <th>PartOrderer</th>
          <th>PartTitle</th>
        </tr>
      </thead>
      <tbody>
        {parts.map((part) => (
          <tr key={part.id}>
            <td>{part.id}</td>
            <td>{part.attributes.chain}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

[eedinson]

Hello and many thanks to you. The hint with the array was important. Thanks also for the lean code example. With this I was able to completely solve my problem.