Sebastian N.

present my blog programming

Pobieranie danych z API JSON

2019-02-19 SeNAPI

Pobieranie danych z API JSON to jedno z podstawowych zadań front-end developera, więc polecam zainteresować się tym zagadnieniem na poważnie i z pełnym zaaganżowaniem.

unsplash.com

Czym jest JSON?

JSON, JavaScript Object Notation (wym. ˈdʒeɪsən) – lekki format wymiany danych komputerowych. JSON jest formatem tekstowym, bazującym na podzbiorze języka JavaScript. - idąc za wikipedią. Przykładowe API można zobaczyć na stronie https://dane.gov.pl/dataset i pobrać, żeby spróbować na własną rękę, jak to z tym pobieraniem jest.

unsplash.com

Pierwszym krokiem jest przygotowanie komponentu odpowiednio w React.js, żeby było gdzie i jak pobrać oraz z renderować całość.

  • Warto przygotować odpowiednią kompozycję wyglądu, tutaj użyłem https://materializecss.com/color.html, którego należy dodać do index.html w postaci <link rel=“stylesheet” …

  • Oczywiście niezbędne będzie przygotowanie importów do naszego komponentu:

import React from 'react'
import axios from 'axios'
import {Link} from 'react-router-dom'
  • Następnie należy przygotować odpowiednie “puste naczynie” za pomocą proposów:
const DataGoThumb = (props) => (
    <div className="thumb">
        <Link to={'/'}  className="grey-text text-darken-4 ">
            <span className="card-title card-title-title center heading">
                <span className='headingText'>
                    {props.title}
                </span> 
            </span>
        </Link>
        <div className="grey-text text-darken-3 strechLine" style={styleBlue}>
            <div dangerouslySetInnerHTML={ {__html: props.notes} } />
        </div> 
        <div className="row center">
            <div className="col s12 m6">
                <span className="d-md-block1"> Data modyfikacji: </span>
                <span className="d-md-block"> {props.modified} </span>
            </div>
            <div className="col s12 m5 offset-m1">
                <span className="d-md-block1"> Data utworzenia: </span>
                <span className="d-md-block"> {props.created} </span>
            </div>
        </div>
        <div className="center" >
            <span className="d-md-block1">
                Odwiedzających: 
            </span>
            <span className="d-md-block">
                {props.views_count} 
            </span>
        </div>
        <div className="center">
            {props.author}
        </div>
        <div className="grey-text text-darken-3 strechLine">
            Słowa kluczowe: {' ' + props.tags}
        </div>
    </div>
  );    

Dzięki temu komponentowi mamy odpowiednią kompozycję ułożoną, którą możemy w dowolnym miejscu umieszczać i podpinać do niego różne API - o ile oczywiście po keywordzie props. będzie zgadzać się nazwa elementu z API JSON.

  • Kolejnym krokiem jest utworzenie komponentu, w którym pobierzemy dane z API i umieścimy je w “pustym naczyniu”, które utworzyliśmy powyżej:
export default class ProjectSummary extends React.Component {
    state = {
        dataGov: [],
        subDataGov: [],
        linksDataGov: [],
    }
    componentDidMount () {
        axios.get('https://api.dane.gov.pl/articles?page=1&per_page=5&sort=-created')
        .then(res => {
            console.log(res);
            this.setState({
                dataGov: res.data.data,
                subDataGov: res.data.meta,
                linksDataGov: res.data.links
            })
        })
    }
   render () {
    const { dataGov } = this.state;
    const { subDataGov, linksDataGov } = this.state;
    const dataList = dataGov.length ? (
        dataGov.map((listInfo, i) => {
            return (
                <div className="post card" key={listInfo.id}> 
                    <div className="card-content">
                        <DataGoThumb 
                            tags={listInfo.attributes.tags} 
                            title={listInfo.attributes.title.replace(/( \S) /g, "$1\xa0")} 
                            notes={listInfo.attributes.notes.replace(/<\/?[^>]+(>|$)/g, "").slice(0, 220).replace(/( \S) /g, "$1\xa0") + '...'}
                            
                            modified={
                                listInfo.attributes.modified.slice(0,10).replace(/-/g, ".") 
                                + ', '
                                + listInfo.attributes.modified.slice(11,16)
                            }
                            created={
                                listInfo.attributes.created.slice(0,10).replace(/-/g, ".") 
                                + ', '
                                + listInfo.attributes.created.slice(11,16)
                            }
                            views_count={listInfo.attributes.views_count}
                            author={listInfo.attributes.author}
                        />
                        <div>
                            {listInfo.relationships.datasets.links.related.href}
                        </div>
                    </div>
                </div>
            )
        })
    ) : (
        <div className="center">No data yet! </div>
    )
        return (
            <div className="card z-depth-0 project-summary">
                <div className="card-content grey-text text-darken-3">
                    {dataList}
                </div>
                <div>
                    <strong>Elementy meta i links:</strong>
                    <div>
                        Count: {this.state.subDataGov.count}
                    </div>
                    <div>
                        Path: {this.state.subDataGov.path}
                    </div>
                    <div>
                        Rel_uri: {this.state.subDataGov.rel_uri}
                    </div>
                    <div>
                        Took: {this.state.subDataGov.took}
                    </div>
                    <div>
                        Links-first: {this.state.linksDataGov.first}
                    </div>
                </div>
            </div>
        )
    }
}

Zatrzymajmy się chwilę przy tym co się tu znajduje. Otóż w state zadeklarowaliśmy stany, w których zawarliśmy puste tablice [ ]. Następnie w funkcji componentDidMount trigerujemy axiosa z metodą get (która pobiera dane API przygotowane przez back-end), i używamy dalej metody then, która pozwala umieścić zmienione stany w this.setState zgodnie z obiektami zawartymi w API. To wszystko musimy przetworzyć w tablicę korzystając z funkcji map korzystając dodatkowo z “pustego naczynia” - <DataGoThumb…>, w którym zawarta jest kompozycja. Po czym wszystko należy wywołać w funkcji return.

Na końcu otrzymujemy!?

unsplash.com

Jest to prosty przykład, jak obsługiwać zewnętrzne API JSON w swojej aplikacji reactowej. W razie, jakichkolwiek wątpliwości, napisz postaram się odpowiedzieć. Miłego!