Javascript 角度ng重复无法获取对象的值_Javascript_Angularjs_Json

Javascript 角度ng重复无法获取对象的值

javascript angularjs json

Javascript 角度ng重复无法获取对象的值,javascript,angularjs,json,Javascript,Angularjs,Json,我有一个具有以下结构的JSON数组： [{ 'playlist_name': 'abced', 'playlist_id': 123 }, { 'playlist_name': 'abcde', 'playlist_id': 123 }] 我想在此分区中插入此JSON： <div class="horizontal-tile" ng-repeat="todo in todos"> <div class="tile-left" style='min-heig

我有一个具有以下结构的JSON数组：

[{
  'playlist_name': 'abced',
  'playlist_id': 123
}, {
  'playlist_name': 'abcde',
  'playlist_id': 123
}]

我想在此分区中插入此JSON：

<div class="horizontal-tile" ng-repeat="todo in todos">
  <div class="tile-left" style='min-height:100px;width:100px;'>
    <div class="background-image-holder">
      <img alt="image" class="background-image" src="img/project-single-1.jpg">
    </div>
  </div>
  <div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
    <div class="description" style="padding:10px;">
      <h4 class="mb8">{{ todo.playlist_name }}</h4>
    </div>
  </div>
</div>

我可以很好地获取数据，但是我似乎无法获取值

playlist\u name

我打印数据，然后得到这个

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

对于，每个对象是：

$$hashKey:"005"
playlist_id:"0DAlm2gb8DrtyRSXEKw07h"
playlist_name:"Rocola On The Go"
__proto__:Object

Todos.get的代码

angular.module('todoService', [])

    // super simple service
    // each function returns a promise object
    .factory('Todos', ['$http',function($http) {
        return {
            get : function(id) {
                return $http.post('/api/getPlaylists',{"id":id});
            },
            create : function(todoData) {
                return $http.post('/api/todos', todoData);
            },
            delete : function(id) {
                return $http.delete('/api/todos/' + id);
            }
        }
    }]);

我显示控制器代码：

angular.module('todoController', [])

    // inject the Todo service factory into our controller
    .controller('mainController', ['$scope','$http','Todos', function($scope, $http, Todos) {
        $scope.formData = {};
        $scope.loading = true;

        // GET =====================================================================
        // when landing on the page, get all todos and show them
        // use the service to get all the todos
        Todos.get(12175507942)
            .success(function(data) {
                console.log(data);      
                $scope.todos = data;
                $scope.loading = false;
            });

        // CREATE ==================================================================
        // when submitting the add form, send the text to the node API
        $scope.createTodo = function() {

            // validate the formData to make sure that something is there
            // if form is empty, nothing will happen
            if ($scope.formData.text != undefined) {
                $scope.loading = true;

                // call the create function from our service (returns a promise object)
                Todos.create($scope.formData)

                    // if successful creation, call our get function to get all the new todos
                    .success(function(data) {
                        $scope.loading = false;
                        $scope.formData = {}; // clear the form so our user is ready to enter another
                        $scope.todos = data; // assign our new list of todos
                    });
            }
        };

        // DELETE ==================================================================
        // delete a todo after checking it
        $scope.deleteTodo = function(id) {
            $scope.loading = true;

            Todos.delete(id)
                // if successful creation, call our get function to get all the new todos
                .success(function(data) {
                    $scope.loading = false;
                    $scope.todos = data; // assign our new list of todos
                });
        };
    }]);

我将显示查看页面：

<!doctype html>

<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">

<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Optimize mobile viewport -->

    <title>Node/Angular Todo App</title>


    <!-- load bootstrap -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600' rel='stylesheet' type='text/css'>


    <!-- SPELLS -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <!-- load angular -->

    <script src="js/controllers/main.js"></script>
    <!-- load up our controller -->
    <script src="js/services/todos.js"></script>
    <!-- load our todo service -->
    <script src="js/core.js"></script>
    <!-- load our main application -->

</head>
<!-- SET THE CONTROLLER -->

<body ng-controller="mainController">
    <div class="main-container">
        <section>
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
                        <h4 class="uppercase mb16">Tus Playlists<br></h4>
                        <p class="lead mb80"><br></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1 col-md-offset-2 col-md-8">
                        <div class="horizontal-tile" ng-repeat="todo in todos">
                            <div class="tile-left" style='min-height:100px;width:100px;'>
                                <div class="background-image-holder">
                                    <img alt="image" class="background-image" src="img/project-single-1.jpg">
                                </div>
                            </div>
                            <div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
                                <div class="description" style="padding:10px;">
                                    <h4 class="mb8">{{ todo.playlist_name }}</h4>
                                </div>
                            </div>
                        </div>

                        <p class="text-center" ng-show="loading">
                            <span class="fa fa-spinner fa-spin fa-3x"></span>
                        </p>

                    </div>
                </div>
            </div>
        </section>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/parallax.js"></script>
    <script src="js/scripts.js"></script>
</body>

</html>

根据

OP

中给出的代码，您的代码工作正常

演示

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'MyCtrl'，函数（$scope）{
$scope.todos=[{
“播放列表名称”：“abced”，
“播放列表\u id”：123
}, {
“播放列表名称”：“abcde”，
“播放列表\u id”：123
}];
});

{{todo.playlist_name}
这样您就可以获得播放列表\u id
？您确定$scope.todos包含所有正确的数据吗？你调试过了吗？是的，我打印了所有的json，我得到了迭代的两个div，但是它们是空的。我无法从todo中获取任何值。我不知道，要记录什么？您可以提供什么？如何检查您的响应数据？你把它记录下来了吗？如果是这样的话，你能提供日志吗？它非常复杂，因为如果我做{{todos.length}，我也不会得到任何值。我仍然有两个div清空了你，但是我的代码也不行。
<!doctype html>

<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">

<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Optimize mobile viewport -->

    <title>Node/Angular Todo App</title>


    <!-- load bootstrap -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600' rel='stylesheet' type='text/css'>


    <!-- SPELLS -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <!-- load angular -->

    <script src="js/controllers/main.js"></script>
    <!-- load up our controller -->
    <script src="js/services/todos.js"></script>
    <!-- load our todo service -->
    <script src="js/core.js"></script>
    <!-- load our main application -->

</head>
<!-- SET THE CONTROLLER -->

<body ng-controller="mainController">
    <div class="main-container">
        <section>
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
                        <h4 class="uppercase mb16">Tus Playlists<br></h4>
                        <p class="lead mb80"><br></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1 col-md-offset-2 col-md-8">
                        <div class="horizontal-tile" ng-repeat="todo in todos">
                            <div class="tile-left" style='min-height:100px;width:100px;'>
                                <div class="background-image-holder">
                                    <img alt="image" class="background-image" src="img/project-single-1.jpg">
                                </div>
                            </div>
                            <div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
                                <div class="description" style="padding:10px;">
                                    <h4 class="mb8">{{ todo.playlist_name }}</h4>
                                </div>
                            </div>
                        </div>

                        <p class="text-center" ng-show="loading">
                            <span class="fa fa-spinner fa-spin fa-3x"></span>
                        </p>

                    </div>
                </div>
            </div>
        </section>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/parallax.js"></script>
    <script src="js/scripts.js"></script>
</body>

</html>

angular.module('scotchTodo', ['todoController', 'todoService']);