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

Question

我需要为书籍对象生成和打印基于 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>

标签： javascriptarraysjsonhttpcallback

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