Array reorganization of data for display

Question

Array reorganization of data for display

Navigation

#1 by (1 votes)

0

I'm creating an application using AngularJs and skeleton , I have the layout mounted, now I'm in the part of making it dynamic, but I'm facing a basic problem. I have the following array coming from the backend:

[
    0 => [
        'title'         => 'Um titulo aqui',
        'slug'          => 'Aqui-o-slug',
        'categoria_id'  => 17
    ],
    1 => [
        'title'         => 'Um titulo aqui',
        'slug'          => 'Aqui-o-slug',
        'categoria_id'  => 12
    ],
    2 => [
        'title'         => 'Um titulo aqui',
        'slug'          => 'Aqui-o-slug',
        'categoria_id'  => 4
    ]
]

The layout holds 4 elements of the array, every 4 I have to put inside a new "row" to not break the layout. What I want to know is what way I could do this, what functions and etc. I want to leave the code as simple as possible.

Note: Use php on the backend.

php angularjs

asked by anonymous 21.02.2016 / 15:23

1 answer

Save fields from one page to another Data of an Array

score 1 · Accepted Answer

At angular, there is the ng-repeat property that will repeat a block of code for each object in its array. Here's an example:

<li ng-repeat="dados in $scope.minhaArray">{{dados.categoria_id}} - {{dados.title}}</li>

That would generate the following html:

<li>17 - Um título aqui</li>
<li>12 - Um título aqui</li>
<li>4 - Um título aqui</li>

Your problem is that you need to repeat within a% of objects% of the array, but row does not do this. I believe you have 2 solutions:

Change your layout; Simpler and less error-prone.
Change your array; more 'complex' and more error-prone.

The layout change does not have much to talk about, you have to adapt it to fit your needs and you can use ng-repeat .

The array change would be more complex. You would need to generate an array inside an array, where each child array contains only 4 objects, getting an array + - like this:

[
    {data1: [
        {categoria_id: 1, title: 'um titulo aqui'},
        {categoria_id: 2, title: 'um titulo aqui'},
        {categoria_id: 3, title: 'um titulo aqui'},
        {categoria_id: 4, title: 'um titulo aqui'}
           ]
    },
    {data2: [
        {categoria_id: 5, title: 'um titulo aqui'},
        {categoria_id: 6, title: 'um titulo aqui'},
        {categoria_id: 7, title: 'um titulo aqui'},
        {categoria_id: 8, title: 'um titulo aqui'}
           ]
    },
    {data3: ...etc...
]

So you could have an html like this:

<div class="row" ng-repeat="data in $scope.minhaLista">
    <div class="bloco" ng-repeat="dados in data">
        {{dados.categoria_id}} - {{dados.title}}
    </div>
</div>