Question 34215 in React native Question posted in
The official React Native documentation can be found here.

How to make this wiktionary query run with axios? – React native

This is the first time I use axios for queries … but now I don’t know any further, I hope someone can give me an advice.

In order to develop a dictionary app with React Native, I want to query wiktionary like this

let url = "https://en.wiktionary.org/w/api.php?format=json&action=query&titles={word}&rvprop=content&prop=revisions&redirects=1&callback=?".replace("{word}", word);
...
    axios({
      method: 'get',
      url: url,
    }).then((response) => {
      var results = {
        title: "",
        definitions: [],
        examples: []
      }
      ....
      let data = response.data;
      ...

This query itself works … now I would like to adapt this for my purposes: wiktionary-parser.

The problem occurs here:

        if(!data || !data.query || !data.query.pages || data.query.pages[-1]) {
            return callback({});
        }

It says

TypeError: Cannot read property 'pages' of undefined

The way the data from my query are organized must differ from the data received by this "$.getJSON…"-query of the Wiktionary parser mentioned above …

But how?

I tried to work with

JSON.stringify(response.data)

and

JSON.parse(response.data)

What am I doing wrong? Any proposals?

Thank you in advance, Frank

The complete code of the query is

  function getENWiktionaryInfo(word, wordLanguage, callback) {
    //  getJSON("https://en.wiktionary.org/w/api.php?format=json&action=query&titles={word}&rvprop=content&prop=revisions&redirects=1&callback=?".replace("{word}", word), function (data) {
    //        $.getJSON("https://en.wiktionary.org/wiki/abdico#Latin", function (data) {
    let url = "https://en.wiktionary.org/w/api.php?format=json&action=query&titles={word}&rvprop=content&prop=revisions&redirects=1&callback=?".replace("{word}", word);
    console.log("getENWiktionaryInfo " + url);

    axios({
      method: 'get',
      url: url,
    }).then((response) => {
      var results = {
        title: "",
        definitions: [],
        examples: []
      }

      let data = response.data;
      console.log("DATA "+data);
      const jsonObj= JSON.stringify(response.data)
      //let data = jsonObj;
      var title, content;

   if (!data || !data.query || !data.query.pages || data.query.pages[-1]) {
      return callback({});
    }

    callback(results);
  });
}

The pure call for the (latin) word "res" is:

https://en.wiktionary.org/w/api.php?format=json&action=query&titles=res&rvprop=content&prop=revisions&redirects=1&callback=?
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I hope I have not bothered you with my problem ... had a conversation here, but all the comments disappeared?

    Anyway ... there must be a difference between Axios and other queries like fetch(...) or getJSON(...) - see discussion here and here

    I tried to reenact this with the console at Google chrome ... but I was not able to use axios there ... I tried to set up Codesandbox.io for this, but then

    Access to XMLHttpRequest at 'https://en.wiktionary.org/w/api.php?format=json&action=query&titles=res&rvprop=content&prop=revisions&redirects=1&callback=?' from origin 'https://k62hb0.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    My last idea was: replacing this query

    https://en.wiktionary.org/w/api.php?format=json&action=query&titles=res&rvprop=content&prop=revisions&redirects=1&callback=?

    by this

    https://en.wiktionary.org/w/index.php?title=res&callback=?&action=raw&origin=*

    ... and it worked ... that was astonishing.

    This different query seems to return the raw markup text (unfortunately, I'm not able to remember where I found it), but that's exactly what I need. For the future, it will be my task to learn more of the javascript details of axios and so on ...

    I would like to parse this text and extract the information I need - using this wiktionary parser mentioned above as a template.

    Many thanks to all who tried to help here!

    Kind regards, Frank


  2. 0

    You can use it like this which would be better

    async function getENWiktionaryInfo(word, wordLanguage, callback) {
 try {
   console.log("getENWiktionaryInfo " + url)

   const response = await axios.get("https://en.wiktionary.org/w/api.php", {
     params: {
       format: "json",
       action: "query",
       titles: word,
       rvprop: "content",
       prop: "revisions",
       redirects: "1",
       callback: "?",
     },
   })

   const data = response.data

   if (data?.query?.pages?.length) {
     throw new Error("Something went wrong")
   }

   return data
 } catch (error) {
   console.log("error", error)
 }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search