मुझे प्रत्येक फ्रेम_नंबर में कितने roi_ (जैसे roi0 या roi1) के आधार पर गतिशील रूप से रेडियो बटन प्रदर्शित करने की आवश्यकता है।
उदाहरण के लिए यदि फ्रेम_नंबर: 1, में केवल एक roi_ (roi0) विशेषता है तो यह एक रेडियो बटन प्रदर्शित करेगा। लेकिन नीचे दिए गए output.json फॉर्म में पहले तीन फ्रेम में दो roi_ (roi0, roi2) होते हैं इसलिए दो रेडियो बटन प्रदर्शित होते हैं।
मैंने कई तरह से कोशिश की है लेकिन समझ में नहीं आ रहा है।कोई सुझाव?

इसके अलावा Buttons_footer में, ive ने दो रेडियो बटन अस्थायी रूप से प्रदर्शित किए क्योंकि यह वही है जो मैं इसे दिखाना चाहता हूं, लेकिन डेटा के आधार पर गतिशील रूप से बदलने के लिए।

[{"frame_number": 1, "roi0": [101.78202823559488, 99.39509279584912, 49.546951219239915, 29.728170731543948], "intensity0": 80.0, "roi1": [101.78202823559488, 99.39509279584912, 49.546951219239915, 29.728170731543948], "intensity1": 157.0},
{"frame_number": 2, "roi0": [102.56623228630755, 97.95906005049548, 50.25603182631066, 30.153619095786393], "intensity0": 80.0, "roi1": [102.56623228630755, 97.95906005049548, 50.25603182631066, 30.153619095786393], "intensity1": 158.0},
{"frame_number": 3, "roi0": [103.39336535376313, 98.20468223716023, 49.58465295946593, 29.750791775679556], "intensity0": 80.0, "roi1": [103.39336535376313, 98.20468223716023, 49.58465295946593, 29.750791775679556], "intensity1": 157.0},

import "bootstrap/dist/css/bootstrap.css";
import React from "react";
import Radio_Button from "./components/Radio_Button.js";
import Buttons_Footer from "./components/Buttons_Footer.js";
import LeftPane from "./components/LeftPane.js";

//import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { apiResponse: [] };

  }
  // Comunicate with API
  callAPI() {
    fetch("http://localhost:9000/IntensityAPI") //React app talks to API at this url
      .then(res => res.json())
      .then(res => this.setState({ apiResponse: res }));
  }
  componentWillMount() {
    this.callAPI();
  }
  render() {
    return (

      <div className="App">

        <header className="App-header">
          <p></p>
          <div class="row fixed-bottom no-gutters">
            <div class="col-3 fixed-top fixed-bottom">

              <LeftPane></LeftPane>
            </div>
            <div class="offset-md-3" >
            <Buttons_Footer readings =   {this.state.apiResponse}/>
            </div>
          </div>
        </header>
      </div>
    );
  }
}
export default App;
import $ from "jquery";
import React, { Component } from 'react';
import { MDBFormInline } from 'mdbreact';
import { Container, Row, Col } from 'reactstrap';
import Radio_Button from "./Radio_Button.js";
// Footer Component with checkbox's used to select region/region's of interest 
class Buttons_Footer extends Component {
  // Enables the Functionality of the "Select Multiple Region's" switch using jquerys
  componentDidMount() {
    $(".region").click(function(e){
    if($('#customSwitches').is(':not(:checked)')){
      if($('.region:checked').length > 1){ // Multiply regions unable to be selected
        alert('You can not check multiple');
        e.preventDefault();
      }
    }
});

$("#customSwitches").click(function(e){ // Multiply regions able to be selected
   $(".region").prop('checked', false);
}); }

//<p>{this.props.region.roi0}</p>
  render() {
    return (
      <Container class = "container  offset-md-3" > 
            <div className='custom-control custom-switch' >
            <input type='checkbox' className='custom-control-input' id='customSwitches' />
            <label  className='custom-control-label' htmlFor='customSwitches'>
                 Select Multiple Region's
            </label> 
            {this.props.readings.map((region)=>{
              return <Radio_Button region ={region} key ={region.frame_number}/>
            })}
              <MDBFormInline>
                <input class="region" type="checkbox" name="region1" value="1" />
                <label for="region1"> 1</label>
                <input class="region" type="checkbox" name="region2" value="2" />
                <label for="region2"> 2</label>
             </MDBFormInline>
            </div>      
    </Container>
    );
  }
}

export default Buttons_Footer;

import React, { Component } from 'react';
import { MDBFormInline } from 'mdbreact';
import { Container, Row, Col } from 'reactstrap';

class Radio_Button extends Component {

//
  render() {

    return (
      <div>
      //<p>{this.props.region.roi0}</p>
      <input class="region" type="checkbox" name="region1" value="1" />
      <label for="region1"> 1</label>
      </div>
    );
  }
}

export default Radio_Button;
0
Sue 17 मार्च 2020, 19:28

1 उत्तर

सबसे बढ़िया उत्तर

यह मानते हुए कि आप नहीं जानते कि प्रत्युत्तर में कितने roi होंगे:

  1. प्रत्येक फ्रेम ऑब्जेक्ट की कुंजी प्राप्त करें और उस डेटा को सरणी में डालें। उसके बाद आपके पास सरणी में सरणियाँ होनी चाहिए।

const keys = frames.map(frame => Object.keys(frame))

  1. रेगेक्स के साथ फ़िल्टर कुंजी।

const filteredKeys = keys.map(frame => frame.filter(key => new RegExp(/^roi\d+$/).test(key)))

  1. प्रत्येक कुंजी के लिए जो शो बटन छोड़ दिया है।

const showButtons = () => { return filteredKeys.map(frame => frame.map(roi => <Button />)) }

यह काम करना चाहिए, लेकिन यह सबसे तेज़ और साफ समाधान नहीं होगा।

0
RauboLuk 18 मार्च 2020, 17:21