Html datalist option through JavaScript in node js

Question

I want to pass data from MySQL database in datalist option. My application is written in express js using ejs view. I can't figure out how to pass database values to list in JavaScript and how to pass this list to ejs file.

add.js:

module.exports = {
  addProductPage: (req, res) => {
    let query = "SELECT shipper_names.Shipper_ID, shipper_names.Shipper_Name FROM shipper_names";
    conn.query(query, (err, results) => {
      if (err) {
        return res.status(500).send(err);
      }
      res.render('add-product.ejs', {
        title: "Add Product",
        shipper_names: results[0],
        message: ''
      });
    });
  }
}

EJS file:

<!doctype html>
<html lang="en">

<div>
  <a class="float-right" href="/" title="Home">Home</a>
</div>

<div class="contnainer">
  <% if (message) {%>
    <p class="text-container text-danger">
      <%= message %>
    </p>
    <%}%>
      <% if (shipper_names) {%>

        <form class="add-player-form" action="" method="POST" enctype="multipart/form-data">
          <div>
            <input type="text" id="shippers_names" list="languageList" />
            <!--your input textbox-->
            <datalist id="languageList">
                    <option value="">  </option>
                    </datalist>
          </div>
          <button type="submit" class="btn">Add Product</button>
        </form>
        <% } else { %>
          <p class="text center">Product Not Found. Go <a href="/add">Here</a>To Add Product.</p>
          <% } %>
</div>

</html>

I have passed query in my js file for select * from table now how to create array list of results and how to pass this to ejs file I am learner so you can understand that I am stucked at basic also I want this list to be populate but when I select any options I want to pass I'd of that selection instead of text — rushirajsinh rana, May 29 '19 at 09:36
pass the data to ejs with: `res.render('myPage', { myDatalistItems: myDatalistItems});` — Roland Starke, May 29 '19 at 09:38
dear sir i am getting ejs compiling error when i tried above suggestion — rushirajsinh rana, May 29 '19 at 11:05
i tried above suggestion i have tried withour removing [0 ] and i am getting value from database but only first entry not entire list is not fetched — rushirajsinh rana, May 29 '19 at 11:18
Sir please give some knowledge on results [0] it's stands for what does it means first row of results than what should I put in [ ] for all rows — rushirajsinh rana, May 30 '19 at 02:32
`results[0]` is the first result, `results[1]` is the second and so on i assume. `results` is an array. you should be able loop over it like `results.forEach(result => console.log(result));` or another way would be `for(let i = 0; i < results.length; i++){console.log(results[i])}` — Roland Starke, May 30 '19 at 05:59
Sir I have Put this code as per your instruction in my Add.js file and i am getting all the results please do me bit more favor about impliment this in ejs file thanks a lot for your all help — rushirajsinh rana, May 30 '19 at 06:33
@RolandStarke dear sir I am getting results in console.log but I am unable to pass same data to ejs file please guide how to pass this values to html datalist — rushirajsinh rana, May 30 '19 at 11:19
Sorry for the long delay always. i try to help, but pls don't wait for me, you can try to search tutorials. Where are you stuck? You know how to pass vairabes to ejs as you do with `message` and you know how to build loops. (the questen os not releated to yours but here you can see a simple example loop in ejs https://stackoverflow.com/questions/36175454/prevent-empty-lines-in-ejs-for-loops). (btw idk it exaclty myself thats why you have to figure it out) — Roland Starke, May 30 '19 at 21:41
Sir I have Tried Many Things but could not get things done correctly i put below code in my ejs file but this code was also unable to get results so i have decided not to have autocomplete text box in my project and replaced same with text codes are as {
} — rushirajsinh rana, May 31 '19 at 06:17
I would recomend taking a look here https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript. in your code it should be: `i < shipper_names.length` instead of `i < shipper_names`. I personaly think if you do some online javascript course you can learn that in a few hours. — Roland Starke, May 31 '19 at 08:06
Sir I still think there is no JavaScript problem but problem in html file as to check I have replaced datalist element with list element and list element is displaying all data — rushirajsinh rana, May 31 '19 at 14:49
@Roland Starke dear sir thanks for your help there was no problem in java script i was just writing loop at wrong place in my ejs/html file new codes are working thanks a lot for your help
<% shipper_names.forEach((shipper_names, index)=>{%> <%})%> — rushirajsinh rana, Jun 01 '19 at 05:35

score 0 · Answer 1 · answered Jun 01 '19 at 05:49

module.exports = {
  addProductPage: (req, res) => {
    let query = "SELECT  * from shipper_names"
    conn.query(query, (err, results) => {
      if (err) {
        return res.status(500).send(err);
      }
      res.render('add-product.ejs', {
        shipper_names: results
      });
    });
  },

        <div>
            <input type="text" id="txtAutoComplete" list="names" />
            <!--your input textbox-->
            <datalist id="names">
                <% shipper_names.forEach((shipper_names, index)=>{%>
                <option id=<%= shipper_names.Shipper_ID%>>
                    <%= shipper_names.Shipper_Name%></option>
                <%})%>
            </datalist>
        </div>

this is working

Html datalist option through JavaScript in node js

1 Answers1