retrieve array data from api to angular app

Question

I'm trying to get an array of data from a local api and display it in my Angular6 App. Getting the content from the api works, but I can't manage to parse the data and output it where i want to. I'm searching Google pages up and down for days for that Problem, but somehow no solution seems to work for me (or i'm actually too stupid to implement it the right way :D) Hopefully you guys can help me.

API: (( Content = require('./models/content')

app.get('/api/retrieveContent', async (req, res) => {
const content = await Content.find({})
//console.log(content)
if(!content) {
    res.json({
        status: false,
        message: 'Content does not exist'
    })
    return
}
res.json({content}) })

Content Model Schema:

const mongoose = require('mongoose')

const ContentSchema = new mongoose.Schema({
    subject: String,
    customer: String,
    task: String,
    date: Date
})

const Content = mongoose.model('Content', ContentSchema)

module.exports = Content

Service:

  getContent(): Observable<mycontent[]> {
    return this.http.get<mycontent[]>('/api/retrieveContent')
      .pipe(tap(data => JSON.stringify(data as mycontent[])))
  }

content.ts file (containing my mycontent Model):

export interface mycontent {
    status: boolean,
    subject: string,
    customer: string,
    task: string,
    date: string,
    id: string
}

Component (in ngOnInit()) (Im initializing contents as an array earlier in that component) :

  this.contentServ.getContent()
      .subscribe(data => this.contents = data)

And finally im trying to output in my component.html file:

  <ul *ngFor="let content of contents">
    <li> {{content.subject}} </li>
    <li> {{content.customer}} </li>
    <li> {{content.task}} </li>
    <li> {{content.date}} </li>
    <li> {{content.id}} </li>
  </ul>

mast3rd3mon · Accepted Answer · 2018-09-12 08:34:32Z

1

const content = await Content.find({}) wont work. the data is returned in the method, not by it. Try the following:

Content.find({}, function(err, contents) {
    if (err) {
        res.status(500).json('Error')
    } else {
        res.status(200).json('data': contents)
    }
})

You might also be able to remove the pipe. If you cant, try changing the pipe to:

.pipe(map(res => res.json().data))

answered Sep 12, 2018 at 8:34

mast3rd3mon

8,8953 gold badges24 silver badges46 bronze badges

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

Comments

J1297 · Accepted Answer · 2018-09-12 09:25:48Z

0

Wow, that was really fast. Exactly what I needed, thank you so much @mast3rd3mon

res.status(200).json('data': contents)

Didn't work just like that, but if i just parse contents in there, its working perfectly fine.

You were also right when you said i could remove the pipe.

Again, thank you so much for that, i was short before going crazy on this one.

Lots of greetings, J1297

answered Sep 12, 2018 at 9:25

J1297

714 bronze badges

1 Comment

mast3rd3mon Over a year ago

it seems strange that you needed to parse it, but youre welcome

Collectives™ on Stack Overflow

retrieve array data from api to angular app

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related