extract plain text from wikipedia API to my website as a paragraph

Question

I'm trying to get the plain text from article about Berlin from wikipedia API and implement it as a paragraph to my website - all in ReactJs environment

I have this url: Link to wikipedia article

which works fine in browser, then try to fetch data like under below sanbox: Link to sandbox

which usually works with most of APIs but here I have no idea what to do - in state I got object where I can't actually reach the article text. I can for example reach the URL adress, but this is not what I'm looking for.

Please put the code etc. in the question instead of linking to a sandbox — PHPirate, Nov 17 '19 at 17:01

Victor · Answer 1 · 2019-11-17T11:40:59.190

1

Here's a working solution.

https://codesandbox.io/s/nervous-nightingale-rwv2u

Here are a couple of points for you to consider:

Your query URL had a ' at the end which made it return no results
You need to extract the content of the results to show them in your HTML, that's what the getFirstPageExtract function does
Rendering HTML from state has its downsides, please read render html in state string

edited Nov 17 '19 at 11:40

answered Nov 17 '19 at 11:35

Victor

194
4

1

Thanks ! You're my God :):) ...now just need to read it like 100 times to understand what's happening here and we're good :) thanks again ! – BillyTheKid1986 Nov 17 '19 at 12:29

score 0 · Answer 2 · answered Nov 17 '19 at 11:55

Remove the typo in your url '

I've added loading and error state as well because I think that it is a very common practice to handle loading and error state. I've also make your contents into an array and render your array using map

Note that I've used dangerouslySetInnerHTML props and it is known to be very dangerous and risky to a cross-site scripting (XSS) attack.

import ReactDOM from "react-dom";
import React, { useState, useEffect } from "react";

const App = () => {
  const [contents, setContents] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState();

  const url =
    "https://en.wikipedia.org/w/api.php?action=query&origin=*&prop=extracts&format=json&exintro=&titles=Berlin";

  const extractAPIContents = (json) => {
    const { pages } = json.query;
    return Object.keys(pages).map(id => pages[id].extract);
  }

  const getContents = async () => {
    let resp;
    let contents = [];
    setLoading(true);
    try {
      resp = await fetch(url);
      const json = await resp.json();
      contents = extractAPIContents(json);
    } catch(err) {
      setError(err);
    } finally {
      setLoading(false);
    }
    setContents(contents);
  };

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

  if (loading) return 'Loading ...';
  if (error) return 'An error occurred';
  return (
    <div>
      <h1>Article</h1>
      {contents.map(content => <div dangerouslySetInnerHTML={{ __html: content }} />)}
    </div>
  )
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here is a working demo : https://codesandbox.io/s/blissful-davinci-m5j9i?fontsize=14&hidenavigation=1&theme=dark

Thanks ! this one is great solution too, ...God.... i feel like i'm so weak now in React :( , really appreciate the attention ! — BillyTheKid1986, Nov 17 '19 at 12:31
Feel free to ask me anything if you don't understand anything in the codes. :) This is just an example, of course in `Production` you will really think twice before using `dangerouslySetInnerHTML` and accessing object property. — junwen-k, Nov 17 '19 at 12:38

extract plain text from wikipedia API to my website as a paragraph

2 Answers2