Успешный обратный вызов $ http выполняется дважды вместо одного - Java-скрипт

Question

Мне нужно создать и напечатать флажки на основе JSON-фида для объекта books. Пока что попробовал следующее. В массиве 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",
        }
    ]
  }
}]

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

Импровизированное предложение @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)
  })

Answer 2

Я думаю, вы неправильно обращались к данным.

Вот упрощенная версия:

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