Using API to import Chicago Art Institute using react typescript-CodePudding

I am having an extremely hard time trying to import a list of image details on my react application from the Chicago art institute. I struggle a lot understanding API, so a detailed answer would be helpful. As of now, I do understand the code I need for the image list I want, but I am stuck at this code below on making it do what I want with the link provided from the Chicago art documentation. I would like for the API to pop up on the website if possible.

import { Navbar } from '../Navbar';
import Real from '../../assets/images/scream.jpeg'
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
    background: {
        backgroundImage: `linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%), url(${Real})`,
        width: '100%',
        height: '100%',
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
        position: "absolute",
        zIndex: -1,
    },
    main_text: {
        textAlign: 'center',
        position: 'relative',
        top: '70%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        color: 'white',
    }
})

async function getArt() 
{
  let response = await fetch(`https://api.artic.edu/api/v1/artworks?ids=208131,240935,142595,120300,13454,151363,102611,191556,117266,137125,126414&fields=id,title,image_id`);
  let data = await response.json()
  return data;
}

getArt()
  .then(data => console.log(data)); 

  

  

export const Art = () => {
const classes = useStyles();

  return (
    <>
    <Navbar />
    <div className={`${classes.background}`}>
    <div className={classes.main_text}>
    <div></div>
        </div>
        </div>
    </>
  )
}

CodePudding user response：

Here is a minimalistic implementation. You retrieve data from API, then set your img's src attribute to the API's response.

import React, { useEffect, useState } from "react";
const imageUrl = "https://api.artic.edu/api/v1/artworks?ids=208131,240935,142595,120300,13454,151363,102611,191556,117266,137125,126414&fields=id,title,image_id";

export default function App() {
  const [img, setImg] = useState();

  const fetchImage = async () => {
    const res = await fetch(imageUrl);
    const imageBlob = await res.blob();
    const imageObjectURL = URL.createObjectURL(imageBlob);
    setImg(imageObjectURL);
  };


  useEffect(() => {
    fetchImage();
  }, []);

  const classes = useStyles();

  return (
    <>
      <Navbar />
      <img src={img} alt="icons" />
      <div className={`${classes.background}`}>
        <div className={classes.main_text}>

          <div></div>
        </div>
      </div>
      
    </>
  );
}

Cheers

CodePudding user response：

You need to use useEffect hook for that inside the component.

Not sure what type of data is returned, I assume that it is an array of objects in this case

interface IArtData {
id: string 
//Put whatever type of data it is
}

export const Art = () => {
const classes = useStyles();
const [artData, setArtData] = useState<IArtData[] | undefined | null >() //If it is array, keep like this, else <IArtData | undefined | null>

//Run effect at mount time, fetch data and set state
useEffect(() =>
{
const fetchData = async () => {
  let response = await fetch(`https://api.artic.edu/api/v1/artworks?ids=208131,240935,142595,120300,13454,151363,102611,191556,117266,137125,126414&fields=id,title,image_id`);
  let data: IArtData[] | undefined | null = await response.json()
//Set data to state
  setArtData(data)
}
fetchData()
}, []) //Run only once on mount

  return (
 <>
      <Navbar />
      <div className={`${classes.background}`}>
        <div className={classes.main_text}>
          <div>

            {artData?.length
        //Check if artData exists and render items
              ? artData.map((item) => {
                  return <p>Fill this with item.property</p>;
                })
              : null}
          </div>
        </div>
      </div>
    </>
  )
}