Импорт JSON на angularJS с $ http.get - PullRequest
Новая
       4

Импорт JSON на angularJS с $ http.get

0 голосов
/ 10 апреля 2020

Я учусь angularJs, и я хочу импортировать массив из json на моем контроллере Пример: 

myApp.controller("demoCtrl", function ($scope, $http) {

            var promise = $http.get("todo.json");

            promise.then(function (data) {
                $scope.todos = data;
            });


        });

и я использую таблицу для отображения данных на todos: 

<table class="table">
            <tr>
                <td>Action</td>
                <td>Done</td>
            </tr>
            <tr ng-repeat="item in todos">
                <td>{{item.action}}</td>
                <td>{{item.done}}</td>
            </tr>
        </table>

и это приводит к текущей странице html:

enter image description here

<!DOCTYPE html>
<html ng-app="demo">

<head>
    <title>Example</title>
    <link href="../css/bootstrap.css" rel="stylesheet" />
    <link href="../css/bootstrap-theme.css" rel="stylesheet" />
    <script src="angular.js"></script>
    <script type="text/javascript">

        var myApp = angular.module("demo", []);

        myApp.controller("demoCtrl", function ($scope, $http) {

            var promise = $http.get("todo.json");

            promise.then(function (data) {
                $scope.todos = data;
            });



        });
    </script>
</head>

<body ng-controller="demoCtrl">
    <div class="panel">
        <h1>To Do</h1>
        <table class="table">
            <tr>
                <td>Action</td>
                <td>Done</td>
            </tr>
            <tr ng-repeat="item in todos">
                <td>{{item.action}}</td>
                <td>{{item.done}}</td>
            </tr>
        </table>
    </div>
</body>

Ответы [ 2 ]

1 голос
/ 10 апреля 2020

Обычный способ получить доступ к json - это данные внутри возвращаемого объекта из http-запроса - вы пытаетесь использовать весь возвращаемый объект.

Я использую «response» в качестве возврата от запроса get - тогда данные - «response.data». Это необходимо, поскольку в объекте ответа из запроса get возвращаются другие свойства.

Попробуйте изменить свое обещание следующим образом: 

promise.then(function (response) {
   $scope.todos = response.data;
});

Также у вас должны быть thead и в таблице указывается более семантически правильная таблица 

<table class="table">
   <thead>
     <tr>
       <th scope="col">Action</th>
       <th scope="col">Done</th>
      </tr>
   </thead>
   <tbody>
      <tr ng-repeat="item in todos">
          <td>{{item.action}}</td>
          <td>{{item.done}}</td>
       </tr>
    </tbody>
   </table>
0 голосов
/ 10 апреля 2020

Обещание вернуть весь ответ в обратном вызове. Данные находятся в response.data 

myApp.controller("demoCtrl", function ($scope, $http) {
  var promise = $http.get("todo.json");
  // Entire response in callback
  promise.then(function (response) {
    $scope.todos = response.data; // Data is in response.data
  });
});

Подробнее: https://docs.angularjs.org/api/ng/service/ $ http

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...