Блог

Я пытаюсь получить данные из JSON с помощью Angular и сопоставить их с моделью, а затем показать на веб-странице. Я сделал это, но я не получаю никаких результатов, например, данные из JSON не могут быть взяты или что-то в этом роде.

Вот моя попытка:

JSON:

 {
    "location": [
        {
            "_id": "5f3567a8d8e66b41d4bdfe5f",
            "lat": "44.4363228",
            "lng": "25.9912305",
            "token": "edb153fb9d8d5628",
            "__v": 0
        }
    ]
  

Модель:

 export class Post {
    public _id: string;
    public token: string;
    public lat: string;
    public lng: string;
}
  

Класс обслуживания:

 @Injectable({ providedIn: 'root' })
export class PostsService {
    public posts: Post[] = [];
    private postsUpdated = new Subject<Post[]>();
    Post: Promise<any>;

    constructor(private http: HttpClient) {}

    private url: string = 'http://localhost:8000/location';

    getPosts() {
        this.http
            .get<{ posts: any[] }>(this.url)
            .pipe(
                map((postData) => {
                    return postData.posts.map((post) => {
                        console.log(this.posts);
                        return {
                            _id: post._id,
                            token: post.token,
                            lat: post.lat,
                            lng: post.lng,
                        };
                    });
                })
            )
            .subscribe((transformedPosts) => {
                this.posts = transformedPosts;
                this.postsUpdated.next([...this.posts]);
            });
    }


    getPostUpdateListener() {
        return this.postsUpdated.asObservable();
  }
}
  

post-list.component.ts:

 @Component({
    selector: 'app-post-list',
    templateUrl: './post-list.component.html',
    styleUrls: ['./post-list.component.css'],
})
export class PostListComponent implements OnInit, OnDestroy {
    posts: Post[] = [];
    private postsSub: Subscription;
    result: any;

    constructor(public postsService: PostsService) {
        //dependency-injection
    }
    ngOnInit() {
        this.postsService.getPosts();

        this.postsSub = this.postsService
            .getPostUpdateListener()
            .subscribe((posts: Post[]) => {
                this.posts = posts;
            });
    }

    onShow() {
        console.log('TODO');
    }

    ngOnDestroy() {
        this.postsSub.unsubscribe();
    }
}
  

post-list.component.html:

 <mat-accordion multi="true" *ngIf="posts.length > 0">
    <mat-expansion-panel *ngFor="let post of posts">
        <mat-expansion-panel-header>
            {{ post.token }}
        </mat-expansion-panel-header>
        <p>{{ post.lat }}</p>
        <p>{{ post.lng }}</p>
        <mat-action-row>
            <button mat-raised-button color="accent" (click)="onShow(post._id)">
                SHOW
            </button>
        </mat-action-row>
    </mat-expansion-panel>
</mat-accordion>
<p class="info-text mat-body-1" *ngIf="posts.length <= 0">No posts added yet</p>
  

app.component.html:

 <app-header></app-header> <br /><br />

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

<br /><br />

<app-post-list></app-post-list>
  

И вот мой результат (фото):

Я также пытался сделать это разными способами, всегда не получая результата.

Любая помощь или идеи будут высоко оценены!

Ошибка на изображении гласит, что атрибут posts не существует в объекте postData, который получен с помощью get-запроса. Отсутствие атрибута posts также очевидно в предоставленном вами JSON.

 {
    "location": [
        {
            "_id": "5f3567a8d8e66b41d4bdfe5f",
            "lat": "44.4363228",
            "lng": "25.9912305",
            "token": "edb153fb9d8d5628",
            "__v": 0
        }
    ]
  

Вы должны полностью удалить канал, и все должно быть в порядке.