AngularJs:Strange result in iterating key value pair

Question

I have an array in angular as follows

$scope.arr={
    "abc/xyz/../": [
        "a1.txt",
        "a2.txt",
        "a3.txt"
    ],
    "": [
        "no-folder.txt"
    ],
    "abc1/xyz/../": [
        "a4.txt",
        "a5.txt",
        "a6.txt"
    ]
}

i want to iterate through this array and need to get the results as follows

    "a1.txt",
    "a2.txt",
    "a3.txt" 

and

"no-folder.txt"

and

            "a4.txt",
            "a5.txt",
            "a6.txt"

i have tried as follows

<div ng-repeat="test in arr track by $index">
    <h3 ng-repeat="(key, value) in test">
        {{value}}
    </h3>
</div>

but i am getting strange results as each character is coming as result . can u pleas help.

update please look to this fiddle https://jsfiddle.net/771voyj6/8/

Answer 1

I suspect that the JSON you are getting is not valid JSON. In second second property of your object is "" (blank) which would be invalid JSON.

JSON

{
    "abc/xyz/../": [
        "a1.txt",
        "a2.txt",
        "a3.txt"
    ],
    //in below line json has no key
    "": [
        "no-folder.txt"
    ],
    "abc1/xyz/../": [
        "a4.txt",
        "a5.txt",
        "a6.txt"
    ]
}

Update

Apology for having wrong conceptualization regarding JSON, above JSON is valid JSON (but technically JSON shouldn't have blank key). I tried the above code in Fiddle which is working fine.

Working Fiddle(Angular 1.4.8)

Answer 2

I don't know if Pankaj is right regarding the empty key value. But certainly your $scope.arr is not an array but an object. As such your code should be:

<div ng-repeat="(key, value)in arr track by $index">
    <h3 ng-repeat=" item in value">
        {{item}}
    </h3>
</div>

Answer 3

I don't know what you want to do but you can create your logic something like this it might work for you ,its some hardcoded work but change it accordingly

       $scope.test = []

       $scope.test.push(arr["abc1/xyz/../"]+arr[""]+arr["abc1/xyz/../"]);

Use test in ng-repeat .. :)

or you can do what i know with your code use ng-repeat like this for your code:

<div ng-repeat="test in arr">
            <div ng-repeat="test2 in test">
              {{test2}}
              </div>

Answer 4

You need to replace your HTML code with the following:

<div ng-repeat="test in arr track by $index"> <div ng-repeat="item in test"> {{item}} </div> </div>

I am getting the result. Please check the following JSFiddle:

http://jsfiddle.net/akonchady/a25r1mm4/3/