Set HTML <select> option value based on Node.js data

Question

From my Node app I am trying to send a JSON array of MongoDB collection to client side HTML/AJAX. I want the Node.js data to reflect on a <select> or on a dropdown. The Node.js response object is sending 2 arrays hostArr and portArr I wish to concatenate the adjacent values and display it on select options. I have included my progress below, this for obvious reason doesn't work. Looking for a solution here..

app.js

MongoClient.connect(url,{ useUnifiedTopology: true }, function(err, db) {
    if (err) throw err;
    var dbo = db.db("mongoDetails");
    dbo.collection("mongoDetails").find({}).toArray(function(err, result) {
      if (err) throw err;
      var hostArr =[];
      var portArr =[];
      for(i=0;i<result.length;i++){
        hostArr.push(result[i].hostname);    
      }
      for(i=0;i<result.length;i++){  
        portArr.push(result[i].port);   
      }
      console.log(hostArr);
      console.log(portArr);
      res.json({mongoDet1:hostArr, mongoDet2:portArr});
      db.close();
    });
  });

Index.html

<div >
    <select id="mongoDetails">
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
    </select>
</div>


<script type="text/javascript">
    $(document).ready(function(){   
        $.ajax({
            url: "http://localhost:8070/api/route1",
            type: 'POST',
            dataType:'json',                    
            success: function(res) {
                console.log(res);
                $.each(res, function(key, value) {
                console.log(key);
                console.log(value);
                $("#mongoDetails").value(res.mongoDet1[value]+res.mongoDet2[value]);   
            });
            }
        });    
    });                           
</script>

Abdollahzadeh Ghalejoghi · Accepted Answer · 2020-06-02 08:33:33Z

2

To do this, you can use the following method:

MongoClient.connect(url,{ useUnifiedTopology: true }, function(err, db) {
    if (err) throw err;
    var dbo = db.db("mongoDetails");
    dbo.collection("mongoDetails").find({}).toArray(function(err, result) {
      if (err) throw err;

      var resultArr =[];

      for(i=0;i<result.length;i++){
        resultArr.push({
          hostname: result[i].hostname,
          port: result[i].port
        });    
      }
      console.log(hostArr);
      res.json({content:resultArr});
      db.close();
    });
  });

<div>
    <select id="mongoDetails"></select>
</div>


<script type="text/javascript">
    $(document).ready(function(){   
        var selectElement = document.getElementById('mongoDetails');
        $.ajax({
            url: "http://localhost:8070/api/route1",
            type: 'POST',
            dataType:'json',                    
            success: function(res) {
                console.log(res);
               res.content.forEach(item => {
                 console.log(item);
                   selectElement.options[selectElement.options.length] = new Option(item.hostname, item.port);
              });
            }
        });    
    });                           
</script>

This tutorial shows exactly what you need to do

also you can get <select> value with this code:

var value = document.getElementById("mongoDetails").value;
console.log(value);

edited Jun 2, 2020 at 8:33

answered Jun 2, 2020 at 7:29

Abdollahzadeh Ghalejoghi

3601 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

nomadev95 Over a year ago

The console.log() gives both arrays yet I don't see the values being reflected on <select> options

Abdollahzadeh Ghalejoghi Over a year ago

That is, the response sample is something like this { mongoDet1:['name1','name2'], mongoDet2:[25,79] }

nomadev95 Over a year ago

Included the console log image for easier understanding

nomadev95 Over a year ago

Now, I want the select options to be like localhost/27017, localhost/27018, localhost/27019... and so on

Abdollahzadeh Ghalejoghi Over a year ago

I corrected the answer again. I think the problem is solved

|

Collectives™ on Stack Overflow

Set HTML <select> option value based on Node.js data

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related