ng-repeat with different nested json

Question

So I have an API that returns a list of activities,but I have to get the info 2 items at a time so if I have 3 items on the first call the json returned would be something like this:

cesta{ 
fecha="14/08/2015 2:42:28 PM",  
tipo="9",  
pagina="1",
total="3",
inst [{ 

    nu_doc_opened="N",  
    nu_doc="14",  
    nu_inst="1",  
    nb_wf{ 
        cdata_section="Gestión calendario específico"
        }
    },
    nu_doc_opened="N",  
    nu_doc="15",  
    nu_inst="2",  
    nb_wf{ 
        cdata_section="Gestión calendario general"
        }
    }]
}

and on the next call the json returned would be like this

cesta{ 
fecha="14/08/2015 2:42:29 PM",  
tipo="9",  
pagina="2",
total="3",
inst { 
    nu_doc_opened="N",  
    nu_doc="16",  
    nu_inst="1",  
    nb_wf{ 
        cdata_section="Gestión calendario específico"
        }
    }
}

I want to go throgh this json and get some of the data and put it in a table,so I'm trying to use ng-repeat like this: (Note that I only want to get some of the values not all)

$scope.basket= data.cesta.inst;

<tbody>
    <tr ng-repeat="b in basket">
    <td>{{b.nu_doc}}</td>
    <td>{{b.nu_inst}}</td>
    <td>{{b.nb_wf.cdata_section}}</td>
    </tr>  
</tbody>

The problem is that this works when the json has 2 or more objects in 'inst' (like in the first example) because it's an array, but when it has only 1 object won't work, What could I do so the ng-repeat work in both cases? Thanks in advanced

score 4 · Accepted Answer · answered Aug 14 '15 at 20:20

4

This is because in second case it get object an when iterate the object the it gets the properties and values not the objects like in first array.

Wrap that object in array then it works.

$scope.basket= angular.isArray(data.cesta.inst) ? data.cesta.inst : [data.cesta.inst];

answered Aug 14 '15 at 20:20

Akshay Dhankhar

274
1
6

Yeah, you have to make sure your inst is always an array :) – Bruno Gomes Aug 14 '15 at 20:23
Thanks! this is what I wanted! Worked perfect – CBalderrama Aug 14 '15 at 20:32

Luke Knepper · Answer 2 · 2015-08-14T20:36:56.250

As you've realized, ng-repeat expects an array. If you can't force the endpoint to return an array always (even when there's only one data object), then you may have to write a hacky workaround.

One hacky idea:

$scope.basket = data.cest.inst.length !== undefined ? data.cest.inst : [data.cest.inst]

I think you get this, but in case not, here's the reason why $scope.basket needs to be an array: In short: ng-repeat expects an array. In the first case, $scope.basket is an array of objects, but in the second, it's just an object. In the second, you need to place the object inside of an array (i.e. [{nu_doc: ...}]) so that the format is consistent. (Note: It's ok to have an array with only one object!)

For example, in the first case, you get:

$scope.basket = [{nu_doc: ...}, {nu_doc: ...}]

And that works fine with the ng-repeat statement as you've written it.

But in the second case, you get:

$scope.basket = {nu_doc: ...}

And so the ng-repeat will loop through the properties on that object (i.e. nu_doc, nu_inst ...) instead of treating it as an array with a single object, which is what you want.

So your second piece of JSON needs to be:

cesta{ 
fecha="14/08/2015 2:42:29 PM",  
tipo="9",  
pagina="2",
total="3",
inst [{ 
    nu_doc_opened="N",  
    nu_doc="16",  
    nu_inst="1",  
    nb_wf{ 
        cdata_section="Gestión calendario específico"
        }
    }
}]

ng-repeat with different nested json

2 Answers2