display array data from mongodb collection into html table, using angular cli as front-end

Question

i'm new at nodejs, mongodb, and angular cli. I'm making a project for my college assignment, but I'm having trouble. I want to display the arrray data from mongodb to the existing table in the agular component.

mongdb schema:

{
"_id" : "sensor-2",
"data" : [ 
    {
        "sensor" : {
            "intensitas" : 1,
            "arus" : 0.1
        },
        "waktu" : "June 9th - 2018, 2:26:47 AM"
    }, 
    {
        "sensor" : {
            "intensitas" : 1,
            "arus" : 0.13
        },
        "waktu" : "June 9th - 2018, 2:32:42 AM"
    }, 
    {
        "sensor" : {
            "intensitas" : 1,
            "arus" : 0.13
        },
        "waktu" : "June 9th - 2018, 2:35:16 AM"
    }
]
}

i want to make tabel from "data" array, like this: table image

sorry my engilsh bad

wessam yaacob · Accepted Answer · 2018-06-10 07:50:05Z

1

model = your object

 <table>
  <tr *ngFor="let item of model.data">
    <td>{{item.sensor.intensitas}}</td>
    <td>{{item.sensor.arus}}</td>
    <td>{{item.waktu}}</td>
  </tr>
</table>

answered Jun 10, 2018 at 7:50

wessam yaacob

9471 gold badge7 silver badges16 bronze badges

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

Comments

Farhad · Accepted Answer · 2018-06-10 07:13:14Z

0

You must first json parse your json data then store it in a model like DataModel then you can bind it to html with *ngFor simply.

`<table>`

<tr *ngFor="let item of DataModel"> <td>{{item.key}}</td> </tr>

</table>

Every times {item} is one index of your array. I hope this help you, if you had any question feel free to ask

answered Jun 10, 2018 at 7:13

Farhad

2262 silver badges11 bronze badges

2 Comments

Ahmad Saeful Over a year ago

hi, thanks for your answer, the data is get from an collection so i must get the collection by id, and i want display the data from that collection in the table,

Farhad Over a year ago

Ok, you can store your parsed json data in your model or you can address it in *ngFor directly *ngFor="let item of DataModel.data"

Collectives™ on Stack Overflow

display array data from mongodb collection into html table, using angular cli as front-end

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related