[SOLVED] How to retrive queries from database and update front end

Moralis General
#1

i have develop a daap. smartcontract is on bsc testnet(0x9759C7ec42eEd34CeA2957929EB6D46390e2A109). i have sync the event on moralis server.now i want to retrieve the entries from the database so that it do not go away with refresh. i want the data to be permanently on front end. My table name is Events and i want these following entities to show on front end. name,price, id, ticketCount, date.

here is my js code

const serverUrl = "xxxx"

  const appId = "xxxx"

   Moralis.start({serverUrl, appId})

   async function login() {

    let user = Moralis.User.current();

 

    if (user) {

      try {

        user = await Moralis.authenticate({ signingMessage: ' done' });

 

        console.log(user);

        let addressOfUser= document.getElementById('address')

        addressOfUser.innerHTML="Address:"+(user.get('ethAddress'));

      } catch (error) {

        console.log(error);

      }

    }

  }
async function createEvent(name, date, price, ticketCount, id) {

  await Moralis.enableWeb3();

  let op = {

    contractAddress: "0x34F04C60439B377E61cf11C4B0e470316c7aED5F",

    functionName: "createEvents",

    abi: [

      {

        inputs: [

          { internalType: "string", name: "name", type: "string" },

          { internalType: "uint256", name: "date", type: "uint256" },

          { internalType: "uint256", name: "price", type: "uint256" },

          { internalType: "uint256", name: "ticketCount", type: "uint256" },

          { internalType: "uint256", name: "id", type: "uint256" },

        ],

        name: "createEvents",

        outputs: [],

        stateMutability: "nonpayable",

        type: "function",

      },

    ],

    params: {

      name,

      date,

      price,

      ticketCount,

      id,

    },

  };

  await Moralis.executeFunction(op);

}

let cont = document.getElementById("cont");

let btn = document.getElementById("btn").addEventListener("click", async () => {

  var nam = document.getElementById("name").value;

  let dt = document.getElementById("date").value;

  let pri = document.getElementById("price").value;

  let ticketCount = document.getElementById("ticketCount").value;

  let id = document.getElementById("id").value;

 

  cont.innerHTML +=

    '<div class="well">' +"Project name:" +nam +"<br></br>" +"Deadline:"+dt+"<br></br>"+"Price:" +pri+"<br></br>" +

    "TicketCount:"+ticketCount+"<br></br>" +

    "ID:"+id+

    "</div>" +"<br></br>";

  await createEvent(nam, dt, pri, ticketCount, id);
```});

document.getElementById('logn').onclick= login;

html file

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="stile.css">

    <link href="p.min.css" rel="stylesheet">

     <!-- INSTALL THE SDK and WEB3 -->

        <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>  

        <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

        <!-- / -->

    <title>Document</title>

</head>

<body id="body">

   

   <div><button id="logn">Connect</button></div>

   <div id="address"> </div>

   <p>Create event </p>

    <input type="text" placeholder="name" id="name">

    <div><input type="text" placeholder="date" id="date"></div>

    <div ><input type="text " placeholder="price" id="price"></div>

    <div ><input type="text " placeholder="id" id="id"></div>

    <div ><input type="text " placeholder="ticketCount" id="ticketCount"></div>

   

    <button type="submit" id="btn">confirm</button>

<div id="cont"></div>

<script src="main.js"></script>

</body>

</html>
#2

i want the data to be permanently on front end

You won’t be able to do this, not like a database.

You will need to fetch the data with queries on page load from your Moralis server.

#3

You will need to [fetch the data](https://docs.moralis.io/moralis-dapp/database/queries) with queries on page load from your Moralis server.

can u show me with my code,? having hard time doing so.

#4

You can use the JavaScript code from the docs. You change the parameters based on what your particular event sync e.g. class name you saved these events to.

async function init() {

  const serverUrl = "xxxx"
  const appId = "xxxx"

  await Moralis.start({serverUrl, appId}) // you will need Moralis.start to be finished before querying

  const query = new Moralis.Query("ClassName");
  const results = await query.find();
  console.log("events", results);

  // can update frontend e.g. with innerHTML like you're already doing
}

init(); // make query when script is loaded
#5

now that i got the arrays on the console with this function

async function init() {

  const query = new Moralis.Query("Events");

  const results = await query.find();

  console.log("events", results);

  // const Monster = Moralis.Object.extend("Events");

  //  const query = new Moralis.Query(Monster);

  // const results = await query.find();

  // console.log("events", results);

  let aip= document.getElementById('udata')

  aip.innerHTML= results.map((items)=> `<div> name:${items.name}</div>`)

}

here is the console


    
but instead of names on the screen i am getting 
`name:undefined`
what i am doing wrong?
#6

where is that items defined?

#7

its a part of mapping, should i use something else?if so plz show me.

#8

I think that I understand something now, you could try to do that map separately and to add console.log to see if it works as expected

#9

the name seems to be in attributes in the original output that you pasted

1 Like
#10

separately as in, plz show me.

#11

you write that map again, and add a console log, to see what it prints inside the map, or you change the code that you have to add a console log

#12

i dont understand? to avoid confusion can u show me what should i write?

#13

try to read the complete text from that post, I don’t know what you should write

#14

after doing this
console.log( aip.innerHTML= results.map((items)=> <div> name:${items.name} </div>))

iam getting this

(3) ['<div> name:undefined </div>', '<div> name:undefined </div>', '<div> name:undefined </div>']0: "<div> name:undefined </div>"1: "<div> name:undefined </div>"2: "<div> name:undefined </div>"length: 3[[Prototype]]: Array(0)

#15

try to use console.log(items) to see what you get, you have to learn how to debug it so that you find the solution yourself

#16

Uncaught (in promise) ReferenceError: items is not defined
at init (main.js:83:15)

#17

what would u do to show the data on the front end from the console in this case? would u use mapping, for loop or something else?

#18

I would use a simple for loop

1 Like
#19

i got it, i should have write like this

items.attributes. name

1 Like