AngularJS在视图中显示JSON数据

时间:2016-12-31 20:47:58

标签: angularjs angularjs-http

在我的模块中,我有一个调用$http的服务并获取一个对象数组

function MenuSearchService($http){       
        this.getMatchedMenuItems=function(searchItem){
             var foundItems =$http({
                method:'GET',
                url:'https://whateverurl.com/whateverdata'
            });
            return foundItems;
        }; // end function
    }; // end service

我使用控制器(作为语法)来处理数据,

function MenuController(MenuSearchService){
        this.query;
        this.results;
        this.promise;
        this.searchClicked=false;
        this.clickToSearch = function(searchItem){
            this.searchClicked=true;
            this.query=searchItem;
            this.promise=MenuSearchService.getMatchedMenuItems()
            .then(function(result){
                this.foundItems = result.data;
                console.log(this.foundItems);        
                }); 
        }; // end onclick
    }; // end controller

我能够检索数据。这是foundItems的标准输出:

enter image description here

foundItems中的每个对象都有属性namedescription。但是当我想在视图中显示它时,

<section class="container" ng-controller="MenuController as m">
    <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in m.foundItems">               
                        <td>{{item.name}}</td>
                        <td>{{item.description}}</td>
                    </tr>
                </tbody>
            </table>
</section>

数据未显示。任何人都可以说出了什么问题吗?

更新 在看了@ charlietfl的评论之后,我将我的代码更新为:

function MenuController(MenuSearchService){
        var m=this;
        m.query;
        m.promise;
        m.searchClicked=false;
        m.clickToSearch = function(searchItem){
            m.searchClicked=true;
            m.query=searchItem;
            m.promise=MenuSearchService.getMatchedMenuItems()
                .then(function(result){
                        m.foundItems = result.data;                       
                        console.log(m.foundItems);  

                    }).catch(function (error) {
                        console.log(error.message());
                });
            }; // end onclick
        }; // end controller

这个概念错误地在控制器内的函数中使用this.

0 个答案:

没有答案