Issue on complex JSON parsing (angularjs and javascript)

Question

I have json as below,

{
    "natureitems": [
        {
            "groups": "fruits",
            "items": [
                {
                    "name": "apple",
                    "properties": {
                        "color": "red",
                        "shape": "round"
                    }
                },
                {
                    "name": "orange",
                    "properties": {
                        "color": "orange",
                        "shape": "round"
                    }
                }
            ]
        },
        {
            "groups": "vegitables",
            "items": [
                {
                    "name": "carrot",
                    "properties": {
                        "color": "red",
                        "shape": "cone"
                    }
                },
                {
                    "name": "tomoto",
                    "properties": {
                        "color": "red",
                        "shape": "round"
                    }
                }
            ]
        }
    ]
}

I need a output in single li ng-repeat(angular view) like

------------------
fruits(these titles row in different background colors)
------------------
apple   - round
orange  - round

----------------
vegitables
---------------
carrot - cone
tomoto - round

I have tried many for loops and angular foreach, but i am getting items separately and groups separately. But after that trying to bring the above structure (title-items-title -items) are very hard to bring in one array.

Is there any easy method for getting these items in this format into an array or object? so that i can easily bind to ng-repeat!

Ok.. No need to be single level list. The output needs to be that format is enough well. — GMan
– GMan, Commented Mar 29, 2015 at 7:15

Max Novich · Accepted Answer · 2015-03-29 07:22:19Z

1

If you are not bound to a single level, you need to use nested ng-repeat:

<ul>
    <li ng-repeat="group in object.natureitems">
        <span class="group-title">{{group.groups}}</span>
        <ul>
            <li ng-repeat="item in group.items">{{item.name+" - "+"item.properties.shape"}}</li>
        </ul>
    </li>
</ul>

here is an example plunker

answered Mar 29, 2015 at 7:22

Max Novich

1,1699 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GMan Over a year ago

yes, this is the result i want. i have used lots of javascript to bring this output previously.. :)

Collectives™ on Stack Overflow

Issue on complex JSON parsing (angularjs and javascript)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related