CODEWITHSUNDEEP
angular
jdflores
jdflores

Reputation: 417

Show SQL table result in angular

I´m develop an application that call a microservices and these return de next JSON:

{
  "result": "OK",
  "message": null,
  "columns": [
    {
      "name": "Id-1",
      "order": 0,
      "values": [
        {
          "value": "cf"
        },
        {
          "value": "13"
        },
        {
          "value": "9c"
        },
        {
          "value": "5a"
        },
        {
          "value": "1c"
        },
        {
          "value": "45"
        },
        {
          "value": "b"
        }
      ]
    },
    {
      "name": "Name",
      "order": 1,
      "values": [
        {
          "value": "prueba"
        },
        {
          "value": "TEST"
        },
        {
          "value": "Op"
        },
        {
          "value": "Op"
        },
        {
          "value": "P"
        },
        {
          "value": "PruebaTest"
        },
        {
          "value": "nal"
        }
      ]
    }
  ]
}

The idea is that in my table show in <th> the columns name and in <td> the values. Something like this:

enter image description here

I tried to do it with several *ngFor but i can´t get the right result How i can do this?

Upvotes: 2

Views: 1969

Answers (3)

Shubham Dixit
Shubham Dixit

Reputation: 1

Try this

<table>
  <tr>
     <td *ngFor="let d of data.columns">
     <table>
<tbody>
  <tr>
    {{d.name}}
    </tr>

<tr *ngFor="let main of d.values">

   <td>
   {{main.value}} 
     </td>
  </tr>

  </tbody>
</table>
    <td>

  </tr>
  </table>

Working link

Upvotes: 1

Marius
Marius

Reputation: 209

Assuming you have control over API: I would make the API return a more readable JSON array of objects.

Having multiple *ngFor will make your application slower - It's better to put this load on server side.

JSON Example: [ { 'id': 'id-1', 'name': 'Name' }, { 'id': 'cf', 'name': 'prueba' }, etc.. ]

Then you can do;

<table>
<thead>
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let row of dataArray">
        <td>{{row.id}}</td>
        <td>{{row.name}}</td>
    </tr>
</tbody>

Upvotes: 0

jitender
jitender

Reputation: 10429

Try this

<table>
  <tr >
  <th  *ngFor="let c of data.columns">{{c.name}}</th>
  </tr>
  <tr>
      <td  *ngFor="let c of data.columns">
       <div *ngFor="let v of c.values">
         <span>
          {{v.value}}
         </span>
        </div>
      </td>
  </tr>
</table>

Demo

Upvotes: 1

Related Questions