Show SQL table result in angular

Question

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:

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

Is it possible to change the structure so that you can make rows in top and columns below that? In tables rows(tr) comes first before columns(td). — MonkeyScript
– MonkeyScript, Commented Sep 25, 2019 at 7:42
You can get column names with Array.map(). And perhaps you want to transpose values to have rows instead of columns — Harun Yilmaz
– Harun Yilmaz, Commented Sep 25, 2019 at 7:47

Shubham Dixit · Accepted Answer · 2019-09-26 07:08:12Z

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

edited Sep 26, 2019 at 7:08

answered Sep 25, 2019 at 7:48

Shubham Dixit

9,2685 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jitender · Accepted Answer · 2019-09-25 07:49:41Z

1

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

edited Sep 25, 2019 at 7:49

answered Sep 25, 2019 at 7:44

jitender

10.4k1 gold badge21 silver badges49 bronze badges

Comments

Marius · Accepted Answer · 2019-09-25 07:51:35Z

0

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>

answered Sep 25, 2019 at 7:51

Marius

2091 silver badge9 bronze badges

2 Comments

jdflores Over a year ago

Yes but, the final user can execute SELECT * FROM X or execute SELECT X.NAME FROM X

Marius Over a year ago

So the user has access to modify and perform their own SQL Queries?

Collectives™ on Stack Overflow

Show SQL table result in angular

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related