I want to check if data retrieved from JSON server matches a particular string in ReactJS. I am using PrimeReact to draw table and graph This is my code:
import React from 'react';
import {DataTable} from 'primereact/datatable';
import {Column} from 'primereact/column';
import {Dialog} from 'primereact/dialog';
import {Button} from 'primereact/button';
import {Chart} from 'primereact/chart';
import './style.css';
export default class TerminalData extends React.Component {
constructor() {
super();
this.state = {
isLoaded: false,
visible: false
};
}
componentDidMount() {
fetch('https://api.myjson.com/bins/80ao2')
.then((response) => response.json())
.then((findresponse) =>{
this.setState({
jsonData: findresponse.root,
isLoaded: true
})
})
}
onClick() {
this.setState({ visible: true });
}
onHide() {
this.setState({visible: false});
}
displaySelection(data) {
if(!data || data.length === 0) {
return <div style={{textAlign: 'left'}}>Click any above to view details</div>;
}
else {
if(data instanceof Array)
return <ul style={{textAlign: 'left', margin: 0}}>{data.map((browseData,i) => <li key={browseData.serialNo}>{'Blocked URLs: ' + browseData.blockedURLs + ' ,Unblocked URLs: ' + browseData.UnblockedURLs + ' ,Other URLs: ' + browseData.otherURLs}</li>)}</ul>;
else
return <div style={{textAlign: 'left'}}>Selected user: {data.blockedURLs+ ' - ' + data.UnblockedURLs + ' - ' + data.otherURLs }</div>
}
}
render() {
let sarjapur=0,kodathi=0,ec=0,whitefield=0;
const barData = {
labels: ['Sarjapur', 'Kodathi', 'EC', 'WhiteField'],
datasets: [
{
label: 'Dataset',
backgroundColor: '#42A5F5',
data: [sarjapur,kodathi,ec,whitefield]
}
]
};
if(this.state.isLoaded === true)
{
for (let i = 0; i < this.state.jsonData.length; i++)
{
if(this.state.jsonData[i].location === "Sarjapur")
{
sarjapur = sarjapur++;
}
else if(this.state.jsonData[i].location === 'Kodathi')
{
kodathi = kodathi++;
}
else if(this.state.jsonData[i].location === 'EC')
{
ec = ec++;
}
else if(this.state.jsonData[i].location === 'WhiteField')
{
whitefield = whitefield++;
}
}
console.log("location" +sarjapur + kodathi + ec + whitefield);
}
return (
<div>
{ this.state.isLoaded ?
<div>
<DataTable value={this.state.jsonData} selectionMode="single" footer={this.displaySelection(this.state.selectedUser1)}
selection={this.state.selectedUser1} onSelectionChange={e => this.setState({selectedUser1: e.value.user_activity})}>
<Column field="serialNo" header="Serial No." />
<Column field="userName" header="Username" />
<Column field="location" header="Location" />
</DataTable>
<Dialog header="Chart" visible={this.state.visible} style={{width: '40vw'}} onHide={this.onHide.bind(this)} maximizable>
<Chart type="bar" data={barData} />
</Dialog>
<Button label="Show Chart" icon="pi pi-external-link" onClick={this.onClick.bind(this)} />
</div>
: "Loading... Please Wait"}
</div>
);
}
}
See the IF condition block
I was checking using If condition but it does not work and outputs 0. I checked individually using console.log(this.state.jsonData[1].location); I am getting its value from Json but when i compare it, if condition fails. I also tried it by setting state instead of using var but same result. Here is JSON data if anyone wants to see http://myjson.com/80ao2.
What i am trying to achieve is that how frequent a particular word appears and increase the count simultaneously and according to that draw graph. How to achieve this? OR is it not a good approach? Please suggest a better way if i can do this?
