Replicate information by JS Angular table columns

Asked

Viewed 785 times

0

I have a table where I need to duplicate the table columns when the ID changes in the received array.

The array consists of result=[{"id":"1","Dia":"250.0","inicial":"1050.0","final":"1050.0","DIAS":"800.0"}, {"id":"1","Dia":"250.0","inicial":"1050.0","final":"1050.0","DIAS":"800.0"},{"id":"2","Dia":"250.0","inicial":"1050.0","final":"1050.0","DIAS":"800.0"},{"id":"2","Dia":"250.0","inicial":"1050.0","final":"1050.0","DIAS":"800.0"}]

<table  class="table table-striped">
        <tr>
            <th></th>
            <th>Inicio</th>
            <th>Fim</th>
            <th>Total</th>
        </tr>
        <tr ng-repeat="r in result">
            <td align="center">{{r.Dia}}</td>
            <td align="center">{{r.inicial}}</td>
            <td align="center">{{r.final}}</td>
            <td align="center">{{r.DIAS}}</td>
        </tr>
    </table>

To get something like this:

Table:

Tabela a criar

html angularjs ng-repeat

  • That way would you have a replication of information for the two lines of results? Id1.dia and again Id1.dia under each other, it’s really like this ?

  • yes because the same id can receive different values, so there may be similar data, in this array they are all the same only to exemplify

  • Is there a rule for displaying this data ? What rule did you use to define that Id1 should be under Id1 ? If it had 2 more id being the value of them 3 would have once again the replica of these columns ?

  • Yes, all id1 data is on the right and id2 on the left. Can receive up to 2 id’s or only 1 id or 2 id’s, no more than that

1 answer

4

To do it the way you need it I recommend that you build the object already the way you need it on the server, since it will be data that will practically be fixed, id=1 and id=2 and id=2 should be on the right of id=1. result = [ {"id1"="1", ..., "id2"="2", ...}, {"id1"="1", ..., "id2"="2", ...} ]

Ellipsis represent the remaining properties, respectively, I recommend only changing their nomenclature, to identify what would be id 1 and id 2.

HTML:

     <tr>
        <th></th>
        <th>Inicio</th>
        <th>Fim</th>
        <th>Total</th>
        <th></th>
        <th>Inicio</th>
        <th>Fim</th>
        <th>Total</th>
    </tr>
    <tr ng-repeat="r in result">
        <td align="center">{{r.Dia1}}</td>
        <td align="center">{{r.inicial1}}</td>
        <td align="center">{{r.final1}}</td>
        <td align="center">{{r.DIAS1}}</td>
        <td align="center">{{r.Dia2}}</td>
        <td align="center">{{r.inicial2}}</td>
        <td align="center">{{r.final2}}</td>
        <td align="center">{{r.DIAS2}}</td>
    </tr>

In my view this would be a simple way to be solved according to your new explanation.

  • The array is objects. I want the ID for 2 to pass its data to the right by replicating the columns Ex: Table: |day |inical |final |days | |day |initial |final |days| ____ id1.day |id1.initial | ...|. | | id2.dia |id2.inicial | ... | ....|

  • So I guess you don’t understand. In the case what you’ve assembled is not an object array, it’s just an array. To be an array of objects you necessarily need to follow the "model" I wrote, putting all the results in the form of objects. For example, you run a query that returns 30 database records (30 rows), each column would be a property and each record would be an object, at the angle you must create an array that encapsulates all of this, so an array of objects.

  • ng-repeat by itself will manage the iteration, which for each loop it makes will be as if you were navigating between the records returned from the database. result = [ {"id"=2, "descricao"="registro 2"}, {"id"=3, "descricao"="registro 3"} ]; The first time the ng-repeat run the DOM application will print: <tr><td>2</<td><td>registro 2</td></tr> The second time the ng-repeat run the apply will print: <tr><td>3</td><td>registro 3</td></tr>

  • This array I put was an example only, the array is objects as you indicated, it comes from a JSON soon comes formatted. My question is how do I put the id1 data in the left columns and the id2 in the left columns that are the same as the left columns want you to put an image to better understand?

  • 1

    Then edit your question in a way that really illustrates the problem, because the way the question is, my answer would solve. I recommend that you use an image and put an array that is actually receiving.

  • The question has been edited

  • Let’s go continue this discussion in chat.

  • It will not be a good solution, because I cannot edit the name of the variables that see from JSON the only thing I can get is through the ID

Show 3 more comments

Browser other questions tagged html angularjs ng-repeat

You are not signed in. Login or sign up in order to post.