在javascript中为每个api数据添加复选框_Javascript_Html

在javascript中为每个api数据添加复选框

javascript html

在javascript中为每个api数据添加复选框,javascript,html,Javascript,Html,我对这件事很陌生，我正在做一个待办事项列表，我想在API中的每个数据前面都有一个复选框来检查它是否完成了 <script type="text/javascript"> fetch('http://localhost:5001/list') .then(function (response) { return response.json(); }) .th

我对这件事很陌生，我正在做一个待办事项列表，我想在API中的每个数据前面都有一个复选框来检查它是否完成了

<script type="text/javascript">
   fetch('http://localhost:5001/list')
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                appendData(data);
                
            })
            .catch(function (err) {
                console.log('error: ' + err);
                console.log(err);
            });
        function appendData(data) {
          var string = JSON.stringify(data)   //converting data into string
          var arr = JSON.parse(string)       //converting data String into json
           console.log(arr.rows)
           var x = arr.rows
            var mainContainer = document.getElementById("myData");
            for (var i = 0; i < x.length; i++) //
                {
                  var div = document.createElement("div");
                  var box;
                  div.innerHTML = arr.rows[i].name + `<input type="checkbox" name= `+(arr.rows[i].name)
+`><label for = `+(arr.rows[i].name)+`></label><br>`;
                  mainContainer.appendChild(div); 
                  }//{}
            
           /* console.log(arr.rows[i].name)*/
        }


</script>


取（'http://localhost:5001/list')
.然后（功能（响应）{
返回response.json（）；
})
.then（功能（数据）{
附加数据（数据）；
})
.catch（函数（err）{
log（'error:'+err）；
控制台日志（err）；
});
函数追加数据（数据）{
var string=JSON.stringify（data）//将数据转换为字符串
var arr=JSON.parse（string）//将数据字符串转换为JSON
console.log（arr.rows）
var x=arr.rows
var mainContainer=document.getElementById（“myData”）；
对于（变量i=0；i`；
mainContainer.appendChild（div）；
}//{}
/*console.log（arr.rows[i].name）*/
}

我还创建了一个div，但它不起作用

<div class="CheckBox" id="myData">
<input type="checkbox" id="v1" name="v1" value="Bike">
<label for="v1" ></label><br>
</div>

有人能帮我为我从API获得的每个数据设置一个复选框吗

提前感谢

您可能希望考虑使用<代码> <代码> HTML元素。使用它可以指定在页面上重复多次的部分的html。列表中的项目正好适合此类功能

您可以复制预定义的块并根据需要更新详细信息，而不是创建一个字符串或一系列元素来保存信息的javascript块

比较这两个：

var div = document.createElement("div");
                  var box;
                  div.innerHTML = arr.rows[i].name + `<input type="checkbox" name= `+(arr.rows[i].name)
+`><label for = `+(arr.rows[i].name)+`></label><br>`;
                  mainContainer.appendChild(div);

var div=document.createElement（“div”）；
var盒；
div.innerHTML=arr.rows[i].name+`
`；
mainContainer.appendChild（div）；

及

没有比较，对吗？注意第二个是多么容易阅读

下面是一个例子：

<!doctype html>
<html>
<head>
<script>
"use strict";
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
    populatePage(dummyData);
}

var dummyData =
{
    rows: [
            {name: "Have problem with programming"},
            {name: "Ask question at SO"},
            {name: "Read answers"},
            {name: "Make an answer as correct if any are"},
            {name: "Profit $$$$"}
        ]
};

function populatePage(data)
{
    data.rows.forEach( eachItemFunc );
    
    function eachItemFunc(item, index, collection)
    {
        var tgtItem = document.getElementById('itemTemplate');
        var newCopy = tgtItem.content.cloneNode(true);
        var nameTgtElem = newCopy.querySelector('#rowName');
        nameTgtElem.textContent = item.name;
        document.body.appendChild(newCopy);
    }
}
</script>
<template id='itemTemplate'>
    <div class='CheckBox'>
        <label><span id='rowName'></span><input type='checkbox'></label>
    </div>
</template>
</head>
<body>
</body>
</html>


“严格使用”；
window.addEventListener（'load'，onload，false）；
功能已加载（evt）
{
populatePage（dummyData）；
}
var dummyData=
{
行：[
{name:“编程有问题”}，
{name:“在SO提问”}，
{name:“阅读答案”}，
{name:“如果有答案，请回答正确”}，
{name:“利润$$$”}
]
};
函数populatePage（数据）
{
data.rows.forEach（eachItemFunc）；
函数eachItemFunc（项、索引、集合）
{
var tgtItem=document.getElementById（'itemTemplate'）；
var newCopy=tgtItem.content.cloneNode（true）；
var nametglem=newCopy.querySelector（“#rowName”）；
nametglem.textContent=item.name；
文件.正文.附件（新副本）；
}
}

看看你从那次提取中得到了什么，你的appendData函数看起来不错

<!doctype html>
<html>
<head>
<script>
"use strict";
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
    populatePage(dummyData);
}

var dummyData =
{
    rows: [
            {name: "Have problem with programming"},
            {name: "Ask question at SO"},
            {name: "Read answers"},
            {name: "Make an answer as correct if any are"},
            {name: "Profit $$$$"}
        ]
};

function populatePage(data)
{
    data.rows.forEach( eachItemFunc );
    
    function eachItemFunc(item, index, collection)
    {
        var tgtItem = document.getElementById('itemTemplate');
        var newCopy = tgtItem.content.cloneNode(true);
        var nameTgtElem = newCopy.querySelector('#rowName');
        nameTgtElem.textContent = item.name;
        document.body.appendChild(newCopy);
    }
}
</script>
<template id='itemTemplate'>
    <div class='CheckBox'>
        <label><span id='rowName'></span><input type='checkbox'></label>
    </div>
</template>
</head>
<body>
</body>
</html>