CODEWITHSUNDEEP
arraysangular
Ahmad Saeful
Ahmad Saeful

Reputation: 21

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

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

Upvotes: 2

Views: 1498

Answers (2)

wessam yaacob
wessam yaacob

Reputation: 937

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>

Upvotes: 1

Farhad
Farhad

Reputation: 226

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

Upvotes: 0

Related Questions