Javascript 获取每个对象的键并将该数据插入数组
我想获取每个帧对象的关键帧,并将该数据插入数组。之后,它应该在数组中包含数组。我尝试了多种方法,但都没有找到答案。有什么建议吗? 这是我将使用的output.json,它可能会达到550帧Javascript 获取每个对象的键并将该数据插入数组,javascript,reactjs,api,react-bootstrap,react-props,Javascript,Reactjs,Api,React Bootstrap,React Props,我想获取每个帧对象的关键帧,并将该数据插入数组。之后,它应该在数组中包含数组。我尝试了多种方法,但都没有找到答案。有什么建议吗? 这是我将使用的output.json,它可能会达到550帧 [{"frame_number": 1, "roi0": [101.78202823559488, 99.39509279584912, 49.546951219239915, 29.728170731543948], "intensity0": 80.0, "roi1": [101.782028235594
[{"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},
下面是我的app.js,我从api获取output.json文件,并将其发送到一个组件button_footer
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}/>
})}
Object.keys({this.props.readings}).map((key, index) => {
const myItem = myObject[key]
return <MyComponent myItem={myItem} key={index} />
})
<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;
```
也许这工作
this.props.readings.map((reading, index) => {
Object.keys(reading).map((key, index) => {
const myItem = reading[key]
return <MyComponent myItem={myItem} key={index} />
})
})
你想要哪把钥匙?我看不到每把钥匙object@iamhuynq我想要所有的关键点,比如我在给出指令,假设我不知道有多少roi会响应:获取每个帧对象的关键点,并将数据插入数组。在此之后,您应该在数组中包含数组。使用正则表达式过滤关键字。对于左显示按钮的每个键。谢谢,我如何签入MyComponent,如果它工作正常,比如我会说“`{this.props.myItem}````也许{this.props.myItem?this.props.myItem:'有问题'}也是我的apiResponse初始状态,[],对吗?谢谢你的帮助@iamhuynq