ReactJS not showing data using &&

Question

I am writing a code that will read data from JSON file towards reactJS file. This JSON file contain multiple pages which starts at "context" then "pageNumber". When i do not include

&& (details.context.pageNumber))

The output will then show only the data content from the latest page for example if there is 20 pages of file in the JSON file it will show the data from the 20th page.

But when i put in the source code above, It supposed to show all the pages content but it does not show content and it shows this error instead.

Here are the source code :

componentDidMount(){
     let jsonData01 = data01
     jsonData01.responses.map((details,index) =>{
     return jsonData01 = ((details.fullTextAnnotation.text) && (details.context.pageNumber));
     })
console.log(`File Content JSON:\n`+ jsonData01);
}

Here are the error Output :

Any ideas or solutions guys ?

My JSON file can be seen here : https://drive.google.com/file/d/15tbyQLjylsefeXxEAmU4HmNn9OHyZxLA/view?usp=sharing

drive.google.com/file/d/15tbyQLjylsefeXxEAmU4HmNn9OHyZxLA/… Here is my JSON file. — Haziman Hamzil
– Haziman Hamzil, Commented May 3, 2019 at 8:07

ravibagul91 · Accepted Answer · 2019-05-03 07:51:38Z

1

The (details.fullTextAnnotation.text) from your JSON might be not available or null. That's why you are getting only page number. Check your JSON once.

Further if you are using jsonData01 inside of <Table> tag, this is the cause of warning. If you want to show data in table then format your data to appropriate row tag i.e. <tr></tr> tag.

jsonData01 = jsonData01.responses.map((details,index) =>{
     return (
        <tr>
          <td>{details.fullTextAnnotation.text}</td> // check if this data is available
          <td>{details.context.pageNumber}</td>
        </tr>
     )
})

answered May 3, 2019 at 7:51

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Haziman Hamzil Over a year ago

The output is : File Content JSON: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ravibagul91 Over a year ago

@HazimanHamzil stringify your json using JSON.stringify(/*Your JSON*/). and post your json in question.

ravibagul91 Over a year ago

@HazimanHamzil Format your JSON file. I think text is not accessible from fullTextAnnotation, it is deep inside.

Haziman Hamzil Over a year ago

After i put let jsonData01 = JSON.stringify(data01) jsonData01 = jsonData01.responses.map((details,index) =>{ return ( <tr> <td>{details.fullTextAnnotation.text}</td> <td>{details.context.pageNumber}</td> </tr> ) }) It shows nothing tho does this means it cant read the JSON file ?

ravibagul91 Over a year ago

@HazimanHamzil In map function try to print details, details.fullTextAnnotation.text and and see details.context.pageNumber, Don't stringify data outside of loop. May be you need to do it in loop.

RajmondX · Accepted Answer · 2019-05-03 07:52:40Z

0

Your error logs indicate that your snippet worked fine (check logs).

Your error logs say you've got a <div> inside your <table> (which is as XML "ok" but React considers it as DOM violation for HTML).

I see another small mistake in your code:


let jsonData01 = data01;
jsonData01.responses.map((details,index) =>{ return jsonData01 = ((details.fullTextAnnotation.text) && (details.context.pageNumber));

Change to

let jsonData01 = data01;
jsonData01 = jsonData01.responses.map((details,index) =>{ return jsonData01 = ((details.fullTextAnnotation.text) && (details.context.pageNumber));

Values vs. References in JavaScript

edited May 3, 2019 at 7:52

answered May 3, 2019 at 7:40

RajmondX

4152 silver badges9 bronze badges

2 Comments

Haziman Hamzil Over a year ago

But it does not show the content of the data from the JSON file and only show the number of page of the file

Haziman Hamzil Over a year ago

is the && does not work in react ? I thought it suppose to work like the queries "WHERE"

Collectives™ on Stack Overflow

ReactJS not showing data using &&

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related