現在、私は配列を生成するJavaScriptファイル持って返される配列

からチェックボックスのリストを作成します。私は、この配列を取得し、各要素のチェックボックスを作成し、その後にそれを表示するにはどうすればよい現在、私は配列を生成するJavaScriptファイル持って返される配列

var express = require('express'); 
var router = express.Router(); 
var adb = require('./adb.js'); 

router.get('/', function(req, res, next) { 
    adb.devices().then(function(devices) { 
     var promises = new Array(); 
     for (var i = 0; i < devices.length; i++){ 
      promises.push(adb.checkBattery(devices[i])); 
     } 
     Promise.all(promises).then(function(availableDevices) { 
      res.render('devices', {output: 'Available Devices: ' + availableDevices}); 
     }); 
    }); 
}); 

module.exports = router;

をウェブページ？私のindex.ejsファイルはこのように見え、動物のチェックリストを配列によって返されたデバイスの名前に置き換えたいと思います。

<!DOCTYPE html> 
<html> 
<head> 
    <title><%= title %></title> 
    <link rel='stylesheet' href='/stylesheets/style.css' /> 
</head> 
<body> 
<% include templates/header.ejs %> 
<h1><%= title %></h1> 

<fieldset> 
    <legend>Available Devices</legend> 
    <input type="checkbox" name="animal" value="Cat" />Cats <br /> 
    <input type="checkbox" name="animal" value="Dog" />Dogs<br /> 
    <input type="checkbox" name="animal" value="Bird" />Birds<br /> 
</fieldset> 
<br> 
<fieldset> 
    <legend>Enter Parameter</legend> 
    <input type="text" id="parameter" placeholder="e.g. id=com.cmplay.tiles2"> 
</fieldset> 
<br> 
<fieldset> 
    <legend>Select Test</legend> 
    <button id="devices" class="float-left submit-button" >Display Devices</button> 
    <button id="openApp" class="float-left submit-button" >Open Application</button> 
    <button id="closeApp" class="float-left submit-button" >Close Application</button> 
    <button id="openBrowser" class="float-left submit-button" >Open Browser</button> 
    <button id="closeBrowser" class="float-left submit-button" >Close Browser</button> 
    <button id="pull" class="float-left submit-button" >Pull File</button> 
    <button id="push" class="float-left submit-button" >Push File</button> 
    <button id="install" class="float-left submit-button" >Install Application</button> 
    <button id="uninstall" class="float-left submit-button" >Uninstall Application</button> 
</fieldset> 

<script type="text/javascript"> 
    var test = document.getElementById("test"); 
    var method = document.getElementById("method"); 
    var parameter = document.getElementById("parameter"); 
    var device = document.getElementById("myButton1"); 
    document.getElementById("devices").onclick = function() { 
     location.href = "devices?" + "&" + parameter.value; 
    }; 
    document.getElementById("openApp").onclick = function() { 
     location.href = "openApp?" + "&" + parameter.value; 
    }; 
    document.getElementById("closeApp").onclick = function() { 
     location.href = "closeApp?" + "&" + parameter.value; 
    }; 
    document.getElementById("openBrowser").onclick = function() { 
     location.href = "openBrowser?" + "&" + parameter.value; 
    }; 
    document.getElementById("closeBrowser").onclick = function() { 
     location.href = "closeBrowser?" + "&" + parameter.value; 
    }; 
    document.getElementById("pull").onclick = function() { 
     location.href = "pull?" + "&" + parameter.value; 
    }; 
    document.getElementById("push").onclick = function() { 
     location.href = "push?" + "&" + parameter.value; 
    }; 
    document.getElementById("install").onclick = function() { 
     location.href = "install?" + "&" + parameter.value; 
    }; 
    document.getElementById("uninstall").onclick = function() { 
     location.href = "uninstall?" + "&" + parameter.value; 
    }; 
</script> 

</body> 
</html>

出典

2017-01-27 rrain

あなたのアレイを介し

<fieldset> 
    <legend>Available Devices</legend> 
    <div id='devices'> 
     <input type="checkbox" name="animal" value="Cat" />Cats <br /> 
     <input type="checkbox" name="animal" value="Dog" />Dogs<br /> 
     <input type="checkbox" name="animal" value="Bird" />Birds<br /> 
    </div> 
    </fieldset>

反復あなたのチェックボックスを保持し、各項目

var express = require('express'); 
var router = express.Router(); 
var adb = require('./adb.js'); 

router.get('/', function(req, res, next) { 
    adb.devices().then(function(devices) { 
     var promises = new Array(); 
     for (var i = 0; i < devices.length; i++){ 
      promises.push(adb.checkBattery(devices[i])); 
     } 
     Promise.all(promises).then(function(availableDevices) { 
      res.render('devices', {output: 'Available Devices: ' + availableDevices}); 
     }); 
     //CREATE YOUR CHECKBOXES 
     var container = document.getElementById('devices'); 
     for (var i in promises) { 
      //GET YOUR DEVICE OBJECT 
      var device = promises[i]; 
      //CREATE THE CHECKBOX 
      var checkbox = document.createElement('input'); 
      checkbox.type = "checkbox"; 
      checkbox.name = "name"; //GET NAME FROM YOUR OBJECT 
      checkbox.value = "value"; //GET VALUE FROM YOUR OBJECT 
      checkbox.id = "id"; //GET ID FROM YOUR OBJECT 
      //CREATE THE LABEL 
      var label = document.createElement('label') 
      label.htmlFor = "id"; //GET ID FROM YOUR OBJECT 
      label.appendChild(document.createTextNode('Label Text Here')); 
      //ADD THE CHECKBOX AND LABEL TO THE CONTAINER 
      container.appendChild(checkbox); 
      container.appendChild(label); 
     } 
    }); 
}); 

module.exports = router;

出典

2017-01-27 15:19:39

のチェックボックスを追加するために、あなたのfieldset内部のコンテナを作成し、コードの第二の部分は一緒に行くん私のjavascriptファイルまたは私のhtmlファイルの配列関数？私はjavascriptファイルを使用している場合、私はまた、スクリプトを作成し、それをソースする必要がありますか？ "" – rrain

いずれかを実行できます。私はちょうどあなたの応答を得る機能の一部としてそれを保つために答えを更新しました。 –

コンテナを追加して、index.jsのコードを指定したコードに変更しました。今度は "新しいTypeErrorを投げる（ 'Router.use（）はミドルウェア機能が必要ですが、' + gettype（fn））」というエラーが出ます。 and "TypeError：Router.use（）はミドルウェア機能が必要ですが、Objectを持っています" – rrain

現在、私は配列を生成するJavaScriptファイル持って返される配列

答えて

関連する問題