Question

我想要实现的是使用JSON详细信息并使用2行3条记录填充html表。

我的html文件如下

<!DOCTYPE html>
<head>
    <title>DETAILS</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="js/main.js"></script>
</head>
<body ng-app="pr_app">
    <h2>DETAILS</h2>
    <div ng-controller="view_controller as view1">
    <table>
        <thead>
            <caption> PR DETAILS </caption>
        </thead>
        <tbody>
            <tr>
                <th>Product</th>
                <th>Quantity</th>
                <th>Owner</th>
            </tr>
            <tr ng-repeat="items in view1.values">
               <td>{{ items }}</td>
            </tr>
        </tbody>
    </table>
    </div>
</body>

包含模块和控制器的MY JS文件如下。注意：我的第一个console.log（）语句记录＆＃34;（2）[Object，Object]＆＃34;这意味着我从我的JSON文件获得响应，但第二个console.log（）给了我＆＃39; 6 undefined＆＃39;所以我无法访问我的JSON数组中的属性值。

任何人都可以指出我的JSON错误或我的http.get正在做一些意想不到的事情或其他任何错误吗？

var app = angular.module("pr_app",[]);
app.controller("view_controller",['$http', function($http){
var self = this;
var record=[] , values=[];
$http.get('js/details.json').then(function(res){
    self.record = res.data;
    console.log(self.record);
    for(var i = 0; i< self.record.length; i++)
    {
        for(var key in self.record[i])
        {
            self.values = record[key];
            console.log(self.values);
        }
    }
}, function(){
    console.log("Something went wrong");
})
}]);

我的JSON如下：

[
    {
        "product": "Adobe",
        "quantity": "1",
        "owner": "ABC"
    },
    {
        "product": "Adobe",
        "quantity": "1",
        "owner": "XYZ"
    }
]

我无法使用angularjs将JSON数组中的数据显示到我的表中

0 个答案: