Question

我需要基于JSON提要为books对象生成和打印复选框。到目前为止，我尝试了以下方法。数据列表数组中有四个对象。在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",
        }
    ]
  }
}]

app.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>

Answer 1

我认为您访问的数据不正确。

以下是简化版本：

      $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)
      })

Answer 2

即兴使用@Try Kroll的建议

var count = 0;
http({
    method: 'GET',
    url: 'json.json'
  })
  .then(data => {
    if(count==0){
    const myDiv = document.getElementById('myDiv')
    data.data.books.contents.forEach(b => {
        const btn = document.createElement('input')
        btn.type = 'checkbox'
        perhiscontainer.appendChild(btn)
    })
  count = count+1;
}
  })
  .catch(err => {
    console.log('error', err)
  })

$ http的成功回调执行两次，而不是一次-Java脚本

2 个答案: