Need help on parsing data for Wikipedia viewer app

Need help on parsing data for Wikipedia viewer app
0

Hello Folks,

I feel like stuck with this. I am developing the ‘Wikipedia Viewer’ in React. Here is my code to fetch data,

getSearchTerm = (term) => {
        
        fetch(
            `https://cors-anywhere.herokuapp.com/https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=${term}`
              
        ).then(
            (response) => {
                if(response.ok){
                    return response;
                }else{
                    console.log('no response');
                }
            }
        ).then(data => data.json()).then(data => {
            console.log(data)
            this.setState({wikidata: data});
        });
    }
render(){
        return (
        <div>
            <ShowSearchResult wikiData={this.state.wikidata}/>
        </div>
        );
    }

This all working fine as in my console log I am getting right output such as,

Array(4)
0: "metadata"
1: (10) ["Metadata", "Metadata registry", "Metadata standard", "Metadata Encoding and Transmission Standard", "Metadata discovery", "Metadata Object Description Schema", "Metadata publishing", "Metadata repository", "Metadata modeling", "Metadata management"]
2: (10) ["Metadata is "data [information] that provides info…ata, reference metadata and statistical metadata.", "A metadata registry is a central location in an or…are stored and maintained in a controlled method.", "A metadata standard is a requirement which is inte…terpretation of the data by its owners and users.", "The Metadata Encoding and Transmission Standard (M… language of the World Wide Web Consortium (W3C).", "In metadata, metadata discovery (also metadata har…ver the semantics of a data element in data sets.", "The Metadata Object Description Schema (MODS) is a…ngress' Network Development and Standards Office.", "Metadata publishing is the process of making metad…ess and a commitment to change control processes.", "A metadata repository is a database created to sto…bout the structures that contain the actual data.", "Metadata modeling is a type of metamodeling used i…and useful for some predefined class of problems.", "Metadata management involves managing metadata abo…r data" is generally referred to as content data."]
3: (10) ["https://en.wikipedia.org/wiki/Metadata", "https://en.wikipedia.org/wiki/Metadata_registry", "https://en.wikipedia.org/wiki/Metadata_standard", "https://en.wikipedia.org/wiki/Metadata_Encoding_and_Transmission_Standard", "https://en.wikipedia.org/wiki/Metadata_discovery", "https://en.wikipedia.org/wiki/Metadata_Object_Description_Schema", "https://en.wikipedia.org/wiki/Metadata_publishing", "https://en.wikipedia.org/wiki/Metadata_repository", "https://en.wikipedia.org/wiki/Metadata_modeling", "https://en.wikipedia.org/wiki/Metadata_management"]
length: 4
__proto__: Array(0)

Where my search term is ‘metadata’ . The output looks to me as, it is an array object, that again contains 3 arrays , each has 10 entries.
However, in my ‘ShowSearchResult’ class when I am trying to parse the data , I am getting error. The ‘render’ method where the parsing is happening looks like,

render(){
        //console.log('ShowSearchResult = ' + this.props.wikiData[3]);
        const dataObj = this.props.wikiData[3];
        if(dataObj){
          dataObj.foreach((element)=>console.log('Hello'));
}

Just for testing, I was trying to parse the 3rd array, that contains 10 urls. But the line,
dataObj.foreach irself throwing error such as,

ShowSearchResult.js:10 Uncaught TypeError: dataObj.foreach is not a function
    at ShowSearchResult.render (ShowSearchResult.js:10)
..............
..............

I really feel very stuck in this. I converted the data in JSON but still couldn’t parse. What I am missing can’t really get . therefore, any help is very much appreciated.

There is at least on issue here. In state you have something named wikidata. In your render you pass this.state.wikidata (which is fine). However, inside your ShowSearchResult component, you refer to this.props.wikiData. That capital D a problem.

Fix the above and then add then uncomment the following line and show us the result:

//console.log('ShowSearchResult = ' + this.props.wikiData[3]);

EDIT: Another each you have is it is forEach and not foreach.

Hello @RandellDawson,

Thank you , that you tried to help. I really appreciate that . The ‘D’ in wikidata is not a problem as if you see above , I am apssing such prop in my ShowSearchResult component,

 <ShowSearchResult wikiData={this.state.wikidata}/>

However, the problem was I was using function name ‘foreach’ , instead of ‘forEach’

Oh yes, I realize my incorrect diagnosis in my first reply. At least I got the forEach part right.

1 Like

Another very important point , I want to mention here for those who will be seeing this post later. The issue was not only, for misspelling ‘forEach’ keyword. Because, after solving this , I still had problem. The data , I fetched couldn’t parse in my render method as it was thowing error ,

TypeError: Cannot read property ‘forEach’ of undefined
My code was,

render(){
      
        //console.log('ShowSearchResult = ' + this.props.wikiData);
        const dataObj = this.props.wikiData[3];
        dataObj.forEach((element)=>console.log('Hello - '+ element));
return <p/>;
}

The line,

dataObj.forEach((element)=>console.log('Hello - '+ element));

was throwing the above mentioned error. Because, this component is rendered twice. Once, when the page loads first time and secondly , when the data is returned from network and state object is set. So for the first time render , ‘dataObj’ is null and there for throws an error.
To overcome this, I used an ‘if’ check.

if(!(Object.keys(dataObject).length === 0 && dataObject.constructor === Object)){
          dataObj.forEach((element)=>console.log('Hello - '+ element));
}

And now everything is fine !

Cheers !