Tanggal :August 5, 2020

Menampilkan Data JSON dari Axios di React Js

Spread the love

Di List belajar sebelumnya kita sudah belajar mengambil data API TMDB menggunakan Axios di react js, kali ini kita akan berusaha menampilkan data tersebut, sebelum itu state project kita dapat diambil disini pada saat ini.

Sebelum itu mari kita Liat Bentuk Data dari API TMDB yang kita ambil , mari kita cek dengan postman dengan url :

https://api.themoviedb.org/3/movie/now_playing?api_key=cab1bfdcab9dc7c24e9132e4fb6c85f2&language=en-US&page=1

Api-TMDB

Api-TMDB

 

Sebelum itu kita sesuaikan data yang akan diterima dengan sedikit mengubah dibagian const data, sehingga objek result bisa lansung kita dapatkan sebelum data json di tampilkan.

componentDidMount() {
    axios
      .get(
        `https://api.themoviedb.org/3/movie/now_playing?api_key=cab1bfdcab9dc7c24e9132e4fb6c85f2&language=en-US&page=1`
      )
      .then((res) => {
        const data = res.data.results;
        this.setState({ data });
      });
  }

Sebelum data ditampilkan maka coba kita console.log dulu bagaimana bentuk data yang kita get dari web TMDB dengan perintah dibawah ini :

const movies = this.state;
console.log(movies.data);

Nah maka hasil console log data berikut akan tampak seperti dibawah ini:

Selanjutnya mari kita tampilkan data tersebut dalam code card, sebelum itu mari kita comot kode card nya di website bootstrap.

Sebelun menaruh code card bootstrap perlu dipahami dalam menampilkan data tersebut kita menggunakan fungsi map pada javascript untuk lebih mudah melooping data json tersebut seperti contoh di bawah ini.

       {movies.data.map((item, i) => {
          return (
            <li key={i} className="card mb-3">
              {item.title}
            </li>
          );
        })}

Code diatas ditujukan untuk mengambil data yang hanya title saja kedalam list <li> yang dibuat, maka tampilannya akan seperti ini :

Nama nama diatas merupakan judul title movie yang sedang tayang sekarang , sesuai data api yang kita get dari url TMDB.

nah sekarang kita akan membuatnya kedalam card. dengan copy semua code berikut ke dalam file LandingPages.js

import React, { Component } from "react";
import Header from "../parts/Header";
import Card from "../parts/Cards";
import { Button } from "react-bootstrap";
import axios from "axios";
export default class LandingPages extends Component {
  state = {
    data: [],
  };

  componentDidMount() {
    axios
      .get(
        `https://api.themoviedb.org/3/movie/now_playing?api_key=cab1bfdcab9dc7c24e9132e4fb6c85f2&language=en-US&page=1`
      )
      .then((res) => {
        const data = res.data.results;
        this.setState({ data });
      });
  }
  render() {
    const movies = this.state;
    console.log(movies.data);
    return (
      <>
        <Header></Header>
        <div>
          <h1>Ini Landing Page</h1>
          <a href="/about">Go to About Page</a>
        </div>

        {movies.data.map((item, i) => {
          return (           
              <div key={i} className="card mb-3">
                <div className="row no-gutters">
                  <div className="col-md-4">
                    <img
                      src={`https://image.tmdb.org/t/p/original/${item.poster_path}`}
                      class="card-img"
                      alt="..."
                    ></img>
                  </div>
                  <div className="col-md-8">
                    <div className="card-body">
                      <h5 className="card-title">{item.title}</h5>
                      <p className="card-text">{item.overview}</p>
                      <p className="card-text">
                        <small className="text-muted">
                          {item.release_date}
                        </small>
                      </p>
                    </div>
                  </div>
                </div>
              </div>          
          );
        })}
      </>
    );
  }
}

Pada tutorial selanjutnya kita akan merapikan card tersebut sehingga enak dilihat oleh mata hehe.

Jika ada value atau nilai lain yang ingin kalian tampilan kedalam card anda hanya perlu mencari nama objeknya dalam data yang bisa kalian liat menggunakan postman, misalkan anda ingin mengambil nilai nilai vote rata ratanya, maka tinggal kalian tampilkan dengan code {item.vote_average} , vote_average diambil dari objek dalam api.

Nah begitulah tutorial kali ini, terimah kasih. beri feedback jika tutorial ini membantu anda.

  1. Membuat Project React Js Pertamamu !
  2. Pengenalan Lingkungan Kerja React js.
  3. Membuat Header dengan React Bootstrap di React js.
  4. Berpindah Halaman di React Js menggunakan React Router Dom.
  5. Belajar Menangkap API Json Dengan Axios pada React Js.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *