javascript - $http 的成功回调执行两次而不是一次 - Java 脚本
问题描述
我需要为书籍对象生成和打印基于 JSON 提要的复选框。到目前为止,我尝试了以下方法。datalist 数组中有四个对象。在 HTML 中,应该为书籍创建四个复选框。但相反,正在创建八个复选框。任何帮助将非常感激。
JSON
[{
"books" : {
"contents" : [
{
"title" : "Book1",
"type" : "CHECKBOX"
},
{
"title" : "Book2",
"type" : "CHECKBOX"
},
{
"title" : "Book3",
"type" : "CHECKBOX",
},
{
"title" : "Book4",
"type" : "CHECKBOX",
}
]
}
"storybooks" : {
"contents" : [
{
"title" : "Book1",
"type" : "CHECKBOX"
},
{
"title" : "Book2",
"type" : "CHECKBOX"
},
{
"title" : "Book3",
"type" : "CHECKBOX",
},
{
"title" : "Book4",
"type" : "CHECKBOX",
}
]
}
}]
应用程序.js
var datalist = [];
$http({
method: 'GET',
url: 'json.json'
})
.then(function successCallback(data) {
$scope.data = data.data;
datalist = $scope.data;
for (var i = 0; i < datalist.length; i ++) {
console.log(datalist[i]);
}
$scope.data.map(function (item) {
item.content = item.book.contents;
datalist = item.content;
datalist.forEach((c, index) => {
var btn = document.createElement('input');
btn.type = 'checkbox';
document.getElementById('mydiv').appendChild(btn);
});
});
}, function errorCallback(response) {
console.log(response);
console.log('error');
});
HTML
<div id="mydiv">
</div>
解决方案
我认为您访问数据不正确。
这是一个简化版本:
$http({
method: 'GET',
url: 'json.json'
})
.then(data => {
const myDiv = document.getElementById('mydiv')
data.books.contents.forEach(b => {
const btn = document.createElement('input')
btn.type = 'checkbox'
myDiv.appendChild(btn)
})
})
.catch(err => {
console.log('error', err)
})
推荐阅读
- php - bcrypt 将 php 函数哈希中的 node.JS 与选项成本进行比较
- twig - base.html.twig 和 single-cms-page.html.twig 有什么区别?
- python - 如何在 PyQt5 QtChart 中刷新数据?
- python - Discord Bot + Google Cloud Run:“容器无法启动。”
- php - 您可以在按钮 onclick 标记中包含 PHP 变量吗?
- vue.js - vuejs中计算属性计算的替代方法
- java - 如何在使用 bouncycastle 签名之前添加 ASN.1 扩展?
- php - 如何在 HTML/PHP(WordPress 和 Woocommerce)中引用自定义产品类型值
- python - 使用应用脚本将 MS Word 文件(保存在云端硬盘中)转换为 Google Docs
- python - 对 lmfit.minimize 中的参数设置条件