Displaying a nested unequal length JSON array in HTML5

Question

I have JSON string of Nested Arrays with unequal length elements as shown below , I want to display it in a page using Javascript or Angular.js.

{ [
   'id':1,
   'value':'tes1'
   'nextLevel':['id':12,
     'value':'tes12'
     'nextLevel':['id':13,
                  'value':'tes13',
                   nextLevel:null ],
     ]

   ],

['id':2,
   'value':'tes2'
   'nextLevel':null ]
]

here nextLevel can be null or it can have another array nested, nested array in turn will have another nested array.

I want to display all array elements into a list, with Parent list element have link to child list Elements, until no child element found.

can somebody post the steps on how to perform this task? As I am able to find example for equal length array, but no example can be found for this nested case.

What attempts have you made? Where are you running into problems? — Mike Brant
– Mike Brant, Commented Sep 15, 2014 at 19:48

Zack · Accepted Answer · 2014-09-17 17:55:35Z

1

I think this would need what is considered a recursive function. Recursion (JavaScript)

Each time through the method, it checks to see if the next level is null, and if it isn't it "recursively" calls itself, passing the next level.

http://jsfiddle.net/k8Lratja/

var ary = {
    'id': 1,
        'value': 'tes1',
        'nextLevel': {
        'id': 12,
            'value': 'tes12',
            'nextLevel': {
            'id': 13,
                'value': 'tes13',
                'nextLevel': null
        }
    }
};

function objectDisplay(objectIn) {
    document.write(objectIn.id + ' ' + objectIn.value + "<br />");
    if (objectIn.nextLevel !== null) {
        objectDisplay(objectIn.nextLevel);
    }
}

objectDisplay(ary);

edited Sep 17, 2014 at 17:55

answered Sep 15, 2014 at 19:42

Zack

2,8791 gold badge36 silver badges62 bronze badges

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

Comments

Maxim Hash · Accepted Answer · 2014-09-15 20:24:29Z

1

Angular example

<div class="ctrl" ng-app="app" ng-controller="ctrl" >
     <div ng-repeat="idLevel in data">
        <div>
            {{idLevel.id}} = {{idLevel.value}}
            <div ng-repeat="nextLevel1 in idLevel.nextLevel" style="margin-left: 20px;">
                {{nextLevel1.id}}={{nextLevel1.value}}
                <div ng-repeat="nextLevel2 in nextLevel1.nextLevel" style="margin-left: 20px;">
                    {{nextLevel2.id}}={{nextLevel2.value}}
                    <div ng-repeat="nextLevel3Item in nextLevel2.nextLevel" style="margin-left: 20px;">
                        {{nextLevel3Item.id}}={{nextLevel3Item.value}}
                    </div>
                </div>
            </div>
        </div>
    </div> 
</div>

answered Sep 15, 2014 at 20:24

Maxim Hash

4055 silver badges20 bronze badges

3 Comments

Zack Over a year ago

Going by this sentence in the question "I want to display all array elements into a list, with Parent list element have link to child list Elements, until no child element found." it makes it sound like the list presented in the question is not always going to look exactly like that. It will have varying amounts of nextLevel in each level. I don't think your solution will handle anything other than the exact object in the question though.

Maxim Hash Over a year ago

Since the problem description wasn't exactly precise I assumed that the case here were 'null' nodes.

Muthuvel P Over a year ago

Hi, thanks for your answer, is there any way to ng-repeat arbitrary level, without using <div>

Collectives™ on Stack Overflow

Displaying a nested unequal length JSON array in HTML5

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related