使用Angular從鍵值數組中獲取JSON值

Question

嗨，我是新手，只是嘗試學習如何做一些事情。 我被困在嘗試顯示以下數據。 使用適用於Chrome的Batarang插件，我可以看到我寧靜的Web服務返回包裝在我模型中的以下json。

    { 
    course:  { 
        country: Test1
        numberEnrolledPerMonthPerWeek:  { 
            entry: 
            [  { 
                key: 2
                value:  { 
                    numberEnrolled: 0
                    weeks: 2
                    year: 2011
                } 
            } ,  { 
                key: 3
                value:  { 
                    numberEnrolled: 4
                    weeks: 3
                    year: 2011
                } 
            } ,  { 
                key: 4
                value:  { 
                    numberEnrolled: 6
                    weeks: 4
                    year: 2011
                } 
            } ,  { 
                key: 8
                value:  { 
                    numberEnrolled: 0
                    weeks: 8
                    year: 2011
                } 
            }  
            ]
        } 
    } 
 } 

我正在嘗試將每個鍵的numberEnrolled值放入一欄中。 所以在我的html中，我有以下內容

<table class="table table-striped table-bordered">
            <tr ng-repeat="course in enrolledcourses.enrolledEnrolment">
                <td>                                
                    {{course.country}}
                </td>   
                <td>
                    {{course.numberEnrolledPerMonthPerWeek[2].numberEnrolled}}
                </td>               
            </tr>   
        </table>

{{course.numberEnrolledPerMonthPerWeek [2] .numberEnrolled}}不會返回任何值，因此任何人都可以建議正確的語法來獲取numberEnrolled值。

我努力了

{{course.numberEnrolledPerMonthPerWeek.2.numberEnrolled}}
{{course.numberEnrolledPerMonthPerWeek[2][numberEnrolled]}}

我的控制器代碼如下

.controller('PeopleCtrl', function($scope, recruitmentFactory) {
    $scope.enrolledcourses = recruitmentFactory.get();


    $scope.test = "hello";
    $scope.save = function() {
        alert("save has been called");
    };
})

Answer 1

首先，您的JSON有很多錯誤。 也許只是您得到的輸出，但以防萬一：：缺少逗號，並且Test是一個符號，但我想它打算是一個字符串。

$scope.enrolledcourses = {
    course : {
    country: 'Test1',
    numberEnrolledPerMonthPerWeek: {
        entry: [{
            key: 2,
            value: {
                numberEnrolled: 0,
                weeks: 2,
                year: 2011,
            }
        }, {
            key: 3,
            value: {
                numberEnrolled: 4,
                weeks: 3,
                year: 2011
            }
        }, {
            key: 4,
            value: {
                numberEnrolled: 6,
                weeks: 4,
                year: 2011
            }
        }, {
            key: 8,
            value: {
                numberEnrolled: 0,
                weeks: 8,
                year: 2011
            }
        }]
    }
    }
};

那么您的html需要訪問正確的屬性：

    <tr ng-repeat="course in enrolledcourses">
        <td>{{course.country}}</td>
        <td>{{course.numberEnrolledPerMonthPerWeek.entry[2].value.numberEnrolled}}</td>
    </tr>

這是一個生動的例子

Answer 2

只是提供一些額外的幫助：我在弄清楚如何瀏覽JSON數據時遇到了很多問題。 嘗試使用可視化工具，並驗證JSON以確保其正確。

這是我用來可視化數據的內容： http : //jsonviewer.stack.hu/此處進行驗證： http : //jsonlint.com/

Answer 3

numberEnrolledPerMonthPerWeek[2] is not your array

嘗試

numberEnrolledPerMonthPerWeek.entry[2]

Answer 4

好吧，所以我做了以下工作以獲取價值

{{course.numberEnrolledPerMonthPerWeek.entry[2].value.numberEnrolled}}