Добавление Omdb API с помощью выборки?

Я пытаюсь использовать API OMDB с помощью fetch и вижу в сети, что моя база данных работает. Однако это не отображается на моей странице Angular 6. Что мне не хватает в этом коде?

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getData() {
    return fetch('http://www.omdbapi.com/?i=tt3896198&apikey=9fa6058b'); 
  } 
}

и это

import { DataService } from './../data.service';
import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: ['./movie-list.component.css']
})
export class MovieListComponent implements OnInit {

  movies = [
    {Title: 'Harry Potter'},
    {Title: 'Space Jam'}
  ]

  constructor(private data:DataService) { }

  ngOnInit() {
    // fetch('http://www.omdbapi.com/?i=tt3896198&apikey=9fa6058b')
    //   .then(response => response.json())
    //   .then( res => this.movies = res);

    this.data.getData()
      .then((response) => {response.json()
      .then((data)=> {this.data = data;
      });
    });
  }

и это

<p>
  movie-list works!
</p>

<div class = "card">
  <ul>
    <li *ngFor = "let movie of movies">
      <h2>{{movie.Title}}</h2>
      <h3>{{movie.Plot}}</h3>
    </li>
  </ul>
</div>

И это то, что я получаю ... см. рисунок ниже.

Добавление Omdb API с помощью выборки?

Что я могу сделать, чтобы увидеть заголовок и сюжет из базы данных??

Спасибо за помощь !

javascript database angular fetch

29.01.2019 08:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 192

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я думаю, что response.json() должен идти с fetch

getData() {
  return fetch('http://www.omdbapi.com/?i=tt3896198&apikey=9fa6058b')
    .then((response) => {
      response.json()
    });
}

this.data.getData().then((data) => {
  this.data = data;
});

Также ответ является объектом, поэтому вам нужно поместить объект в массив, чтобы использовать *ngFor

ДЕМО

Теперь {this.data=data} не работает!! Что случилось?

— 29.01.2019 08:47

Что, если я изменю API на «omdbapi.com/?s=game&apikey=9fa6058b» с работой поиска? Как мне изменить функцию?

— 29.01.2019 09:37

29.01.2019 08:39

Вы не добавили полученные данные в свой массив фильмов.

movies = [
{Title: 'Harry Potter'},
{Title: 'Space Jam'}]

Вот почему вы не видите нужных данных.

Обновлено: вы можете попробовать сделать это:

    let movies = [];

    function doFetch() {
        fetch('http://www.omdbapi.com/?i=tt3896198&apikey=9fa6058b', {
            method: "get"
        }).then(function (response) {
            return response.text();
        }).then(function (text) {
            let json = JSON.parse(text);
            let data = { Title: json.Title, Plot: json.Plot }
            movies.push(data);
        });
    }

    doFetch();

Таким образом, вы заполните свой массив данными, чтобы отобразить их позже.

Как мне это сделать?

— 29.01.2019 08:46

29.01.2019 08:43