Как проверить, соответствуют ли данные JSON определенной строке в React js? - PullRequest
Новая
       38

Как проверить, соответствуют ли данные JSON определенной строке в React js?

0 голосов
/ 31 января 2020

Я хочу проверить, соответствуют ли данные, полученные с сервера JSON, определенной строке в ReactJS. Я использую PrimeReact для рисования table и graph Это мой код: 

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>
        );
    }
}

См. IF condition block

Я проверял, используя условие If, но оно не работает и выводит 0. Я проверил индивидуально, используя console.log(this.state.jsonData[1].location); Я получаю его значение от Json, но когда я сравниваю его, если условие не выполняется. Я также попытался сделать это с помощью setting state вместо var, но с тем же результатом. Вот данные JSON, если кто-то хочет увидеть http://myjson.com/80ao2.

Я пытаюсь добиться того, чтобы как часто появлялось определенное слово и одновременно увеличивалось количество и в соответствии с графиком розыгрыша. Как этого добиться? ИЛИ это не хороший подход? Пожалуйста, предложите лучший способ, если я могу это сделать?

1 Ответ

2 голосов
/ 31 января 2020

Проблема в том, что вы неправильно выполняете приращение 

sarjapur++ // post-increment

change it to 

++sarjapur // pre-increment
...