Dari aplikasi Node saya, saya mencoba mengirim array JSON dari koleksi MongoDB ke HTML/AJAX sisi klien. Saya ingin data Node.js mencerminkan <select> atau dropdown. Objek respons Node.js mengirim 2 array hostArr dan portArr Saya ingin menggabungkan nilai yang berdekatan dan menampilkannya pada opsi yang dipilih. Saya telah memasukkan kemajuan saya di bawah ini, ini karena alasan yang jelas tidak berfungsi. Mencari solusi disini..

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>
0
nomadev95 2 Juni 2020, 10:16

1 menjawab

Jawaban Terbaik

Untuk melakukan ini, Anda dapat menggunakan metode berikut:

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>

Tutorial ini menunjukkan dengan tepat apa yang perlu Anda lakukan


Anda juga bisa mendapatkan nilai <select> dengan kode ini:

var value = document.getElementById("mongoDetails").value;
console.log(value);
1
Abdollahzadeh Ghalejoghi 2 Juni 2020, 08:33