Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
569 views
in Technique[技术] by (71.8m points)

angularjs - Using ng-repeat on JSON containing JSON

I'm somewhat new to angular, and i'm having problems with my json and ng-repeats. I have a list of "modules" and then lists of "weeks" within them:

{
    "modules":
        {
            "module1":
                {
                   "title":"name of module1",
                   "description":"description of module1",
                   "weeks":{"week1":{"title":"Week 01"}
                },
            "module2":
                {
                   "title":"name of module2",
                   "description":"description of module2",
                   "weeks":{"week2":{"title":"Week 02"},"week3":{"title":"Week 03"}
                }
        }
}

my final output is a table, and I can get the modules to repeat, but I'm having a hard time understanding what I'm doing wrong by getting the weeks to loop. Here is my template:

<table class="table table-bordered" ng-repeat="module in ocw.modules">
<tr>
    <td>
        <h3 class="moduletitle">{{ module.title }}</h3>
        <h4>Description</h4>
        <p>{{ module.description }}</p>
    </td>
</tr>
<tr ng-repeat="week in ocw.modules.weeks">
    <td>
        {{ week.title }}
    </td>
</tr>
</table>

So that will output 2 tables, with the proper titles and descriptions, but I can't seem to get the weeks to display correctly. Note that some "modules" have more that one "week". I'm not really sure if the error is in my template or json.

Thanks for any help. S

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I would change your data structure so your modules and weeks are an array of objects.

Demo: http://plnkr.co/edit/e41n9vAMMLf0WWIUQ8HO?p=preview

json data:

{
    "modules":
        [
                {
                   "title":"name of module1",
                   "description":"description of module1",
                   "weeks":[{"id":1, "title":"Week 01"}]
                },

                {
                   "title":"name of module2",
                   "description":"description of module2",
                   "weeks":[{"id":2, "title":"Week 02"},{"id":3,"title":"Week 03"}]
                }
        ]
}

And then your markup would be:

<table class="table table-bordered" ng-repeat="module in ocw.modules">
<tr>
    <td>
        <h3 class="moduletitle">{{ module.title }}</h3>
        <h4>Description</h4>
        <p>{{ module.description }}</p>
    </td>
</tr>
<tr ng-repeat="week in module.weeks">
    <td>
        {{ week.title }}
    </td>
</tr>
</table>

As you are iterating over each module which in this case is module to get the weeks it is just module.weeks much the same as module.title. In your example you are inside the iteration and trying to reference ocw.modules.weeks which doesn't match your json structure.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...