Отображение переключателей в зависимости от атрибутов, присутствующих в словаре

Question

Мне нужно динамически отображать переключатели в зависимости от того, сколько roi_ (например, roi0 или roi1) имеет каждый frame_number.
Например, если frame_number: 1, имеет только один атрибут roi_ (roi0), тогда будет отображаться одна радио-кнопка , Но в приведенном ниже выводе. json форма первых трех кадров имеет два roi_ (roi0, roi2), поэтому отображаются две радиокнопки.
Я пробовал несколько способов, но не могу его получить. Есть предположения?

Кроме того, в Buttons_footer, я отображал две радиокнопки временные, так как я хочу, чтобы это выглядело как динамическое изменение в зависимости от данных.

[{"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;

Answer 1

Предполагая, что вы не знаете, сколько roi будет в ответе:

1. Получите ключи каждого объекта кадра и вставьте эти данные в массив. После этого у вас должны быть массивы в массиве.

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

Фильтр ключей с регулярным выражением.

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

Для каждой клавиши, оставленной кнопкой показа.

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

Это должно работать, но это не будет самым быстрым и чистым решением.