Using Mysql results to populate html

sequelman

I'm building an HTML form to edit data in a MySQL database using Node and EJS. The function returns a RowDataPacket and I can see the content of the results if I do a console.log but I am unable to use the results in my HTML page. How can I use the query results to populate the form fields? Thanks in advance to anyone that can help me with this.

This is how I am calling the function from the app.js file.

app.get('/dogedit', async function(req, res) {
  dogStatus = await myFunctions.getDogStatus();
  clientStatus =  await myFunctions.getClientStatus();
  dog =  await myFunctions.getDogById();
  res.render('pages/dog-edit', {
    dogStatus: dogStatus,
    clientStatus: clientStatus,
    dog: dog
  });
});

This is the function in question

function getDogById() {
  return new Promise(resolve => {
    let sql = "select * from dog where id = 1;";
    let dog = [];
    con.query(sql, (err, row) => {
      if (err) throw err;
      dog.push(row);
      resolve(dog);
      console.log(dog);
    });
  });
};

the function returns the following in the console

[
  [
    RowDataPacket {
      id: 3230,
      name: 'Betty Davis',
      listing_date: '5/3/18',
      contact: 'Tena Price',
      tag_number: 2583,
      microchip: null
    }
  ]
]

When I try to use the results such as name I get an "undefined" error.

    let arr2 =  <%- JSON.stringify(dog) %>;
    document.getElementById("dog_name").defaultValue = arr2.name;

avan

Hey @sequelman

The other way around. You are using it as an object not like an array.

let arr2 =  <%- JSON.stringify(dog) %>;
document.getElementById("dog_name").defaultValue = arr2.dog_name;

arr2.dog_name

is not a valid array call.

avan

Hey @sequelman

Is there any way you can share the whole code base? I don't know if you can create a code sandbox and then share the link maybe. It's a lot easier to help you that way.

sequelman

Hi Avan,

I will try to create a sandbox @ https://codesandbox.io/, I'm not sure how to add a MySQL DB, I will see if there are some examples.

sequelman

Hi Avan,

This is the link to the code https://codesandbox.io/s/modest-hofstadter-ofe1q let me know if you need anything else.

Thanks for looking into this for me.

avan

Hey @sequelman

'dog' is an array right? In 'dog-edit.ejs' you seem to be using it as an object? You are doing 'dog.dog_name' which is something you would do to access a value for a key.

sequelman

I am assuming that the function getDogById returns an object. This is an example of the output from getDogById.

[
  [
    RowDataPacket {
      id: 3230,
      name: 'Betty Davis',
      listing_date: '5/3/18',
      contact: 'Tena Price',
      tag_number: 2583,
      microchip: null
    }
  ]
]

I thought that this code would convert it into an array.

let arr2 =  <%- JSON.stringify(dog) %>;

Should I be using it as an object, can an array not have key-value pair?

sequelman

Your question started me thinking and I think I figured it out. The dog-edit.ejs code does return an array but the record in the array is an object. Changing the code to

document.getElementById("dog_name").defaultValue = arr2[0].dog_name;

fixed my issue.

Sometimes just having another eye on a project is helpful.

Thanks so much for your help.

avan

Hey @sequelman

The other way around. You are using it as an object not like an array.

let arr2 =  <%- JSON.stringify(dog) %>;
document.getElementById("dog_name").defaultValue = arr2.dog_name;

arr2.dog_name

is not a valid array call.

avan

@sequelman that's it!

sequelman

Now I can add the 20 other fields in need in that form.

Thanks again for your help I really appreciate it.