How to Map values in reactjs? - reactjs

Question

I am confused with reactjs api json call back.
In my container>> i have an api response from this --> let broadcast = this.props.broadcastDetailsPageApiResponse;
I need to map the values to 'broadcastData' variable to print it in component page html.(fileds like 'channel','description','recordedUrl',
How can i do it?
The api response as follows.
broadcastdetailcontainer.jsx: place to map console.log("need to map");line no 34.
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux';
import BroadcastDetailPage from '../components/broadcastList/broadcastDetailPage.jsx'
import * as detailPageActions from '../actions/detailPageActions.jsx'
class BroadcastDetailContainer extends Component {
constructor(props) {
super(props);
this.state = {broadcastData: {}};
this.updateBroadcastData = this.updateBroadcastData.bind(this);
}
componentDidMount() {
let broadcastId = this.props.params.broadcastId;
console.log("Broadcast Id in the componentDidMount: " + broadcastId);
this.updateBroadcastData(broadcastId);
}
updateBroadcastData(broadcastId) {
let broadcastData;
let broadcast = this.props.broadcastDetailsPageApiResponse;
// console.log("broadcast: " + JSON.stringify(broadcast));
if (broadcast != null) {
/////////////////////////////////////////////////////////////////
broadcastData = broadcast.channel;
broadcastData = broadcast.user;
console.log("need to map");
//console.log(broadcastData);
/////////////////////////////////////////////////////////////////
}
let content = this.props.homePageApiResponse.content;
if (content != null & broadcastData == null) {
console.log('entered when the home API');
for (let i = 0; i < content.length; i++) {
if (content[i].id == broadcastId) {
broadcastData = content[i];
break;
}
}
}
if (broadcastData == null) {
content = this.props.searchPageApiResponse.content;
if (content != null) {
console.log('entered when the search API');
for (let i = 0; i < content.length; i++) {
if (content[i].id == broadcastId) {
broadcastData = content[i];
console.log(broadcastData);
break;
}
}
}
}
if (broadcastData == null) {
this.props.actions.callDetailApi(broadcastId);
}
else{
this.setState({broadcastData: broadcastData});
}
}
componentWillReceiveProps(nextProps) {
let broadcastId = nextProps.params.broadcastId;
console.log('componentWillReceiveProps');
this.updateBroadcastData(broadcastId);
}
render() {
//console.log("rendered: "+JSON.stringify(this.props.broadcastDetailsPageApiResponse));
return (
<div>
{this.state.broadcastData &&
<BroadcastDetailPage
broadcastDetail={this.state.broadcastData}/>
}
</div>
)
}
}
const mapStateToProps = (state) => ({
homePageApiResponse: state.homePageApiResponse,
searchPageApiResponse: state.searchPageApiResponse,
broadcastDetailsPageApiResponse: state.detailPageApiResponse,
})
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(detailPageActions, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)
(BroadcastDetailContainer)
I need to display the map values in the following component page:
import React, {Component} from "React";
import {Row, Clearfix} from "react-bootstrap/lib";
import VideoPlayer from "./videoPlayer.jsx";
class BroadcastDetailPage extends Component {
render() {
let broadcastData = this.props.broadcastDetail;
return (
<Row>
<div className="popup-cont-container">
<VideoPlayer broadcastData={broadcastData}/>
<div className="video-info">
<div className="info-left">
<div className="main-tag">
# {broadcastData.channel}
</div>
<div className="datenTime">
On Date
</div>
<div className="datenTime"> Location
</div>
<div className="video-info-main"> </div>
<div className="at">#
{broadcastData.handle} </div>
</div>
<div className="info-right">
<span><img src="images/eyeico.png"/>
<a> </a> Live viewers
</span>
<span><img src="images/heart.png"/>
<a> </a> Likes
</span>
</div>
</div>
<Clearfix/>
</div>
</Row>
);
}
}
export default BroadcastDetailPage
{"id":4,"user":{"userId":1,"chatUserId":0,"handle":"satishkrypto","countryCode":"+971","phone":"569942359","picUrl":"https://ss-ap-southeast-1.amazonaws.com/production-speakerswire-images/user-profiles/male3x.png","userStat":{"id":1,"followers":4,"followings":5,"broadcastLikes":0,"broadcastViews":90},"name":"satish verma","existingUser":false,"userProfileImageType":"MALE","invitesLeft":4,"userPriviledge":"SW_BROADCASTER"},"description":"satish's Broadcast","streamId":"pub11489928734882","audio":false,"screenShotUrl":"https://ss-api-eb-dev.s3-ap-southeast-1.amazonaws.com/broadcast-images/pub11489928734882-1489928751454.jpg","recordedUrl":"https://production-ss-videos-red5pro.s3-ap-southeast-1.amazonaws.com/video/record/pub581489997130311.mp4","status":"RECORDED","type":"PUBLIC","locationEnabled":false,"commentsEnabled":true,"channel":{"channelId":14,"channel":"Productivity","color":"#4A148C","priority":986,"created":1489922543000,"updated":1489922543000,"broadcast":0,"liveBroadcast":0},"broadcastStat":{"id":4,"likes":0,"views":14,"viewers":5,"liveViewers":0},"latitude":0.0,"longitude":0.0,"startTime":1489928737000,"endTime":1489928787000,"updated":1489928737000,"event":{"id":4,"description":"satish's Broadcast","type":"BROADCAST_PUBLIC","startTime":1489928737000,"endTime":1489928787000,"status":"FINISHED","eventReminderStatus":"NOT_SENT","updatedAt":1489928787000},"expectedDuration":0,"serviceProvider":"agora"}
Update:
broadcastData = {
...broadcast,
broadcaster: {
name: broadcast.user.name,
handle: broadcast.user.handle
},
channel: {
// channelName: broadcast.channel
},
likes: broadcast.broadcastStat.likes,
views: broadcast.broadcastStat.views,
}

Answer 1

Component 1
render() {
return (
<div className="flexslider tabs_slider no-slide">
<ul className="slides">
{this.state.Movies.map((item, index) => <Component2
key={item.db_recom_id}
item={item}
/>)}
</ul>
</div>
)
}
Component 2
render() {
return (
<li>
<img className="wrap_me" src={this.props.item.db_movies_img} />
)
}

Answer 2

Values that you specified in ques, are present directly inside object, you can access them by data.channel.any_key, data.description, data.recordedUrl.
If you want to print all the values of data.channel, then use map otherwise you can access directly by data.channel.channel.
Check this example:
let data = {
"id":4,
"user":{
"userId":1,
"chatUserId":0,
"handle":"satishkrypto",
"countryCode":"+971",
"phone":"569942359",
"picUrl":"https://ss-ap-southeast-1.amazonaws.com/production-speakerswire-images/user-profiles/male3x.png",
"userStat":{
"id":1,
"followers":4,
"followings":5,
"broadcastLikes":0,
"broadcastViews":90
},
"name":"satish verma",
"existingUser":false,
"userProfileImageType":"MALE",
"invitesLeft":4,
"userPriviledge":"SW_BROADCASTER"
},
"description":"satish's Broadcast",
"streamId":"pub11489928734882",
"audio":false,
"screenShotUrl":"https://ss-api-eb-dev.s3-ap-southeast-1.amazonaws.com/broadcast-images/pub11489928734882-1489928751454.jpg",
"recordedUrl":"https://production-ss-videos-red5pro.s3-ap-southeast-1.amazonaws.com/video/record/pub581489997130311.mp4",
"status":"RECORDED",
"type":"PUBLIC",
"locationEnabled":false,
"commentsEnabled":true,
"channel":{
"channelId":14,
"channel":"Productivity",
"color":"#4A148C",
"priority":986,
"created":1489922543000,
"updated":1489922543000,
"broadcast":0,"liveBroadcast":0
},
"broadcastStat":{
"id":4,
"likes":0,
"views":14,
"viewers":5,
"liveViewers":0
},
"latitude":0.0,
"longitude":0.0,
"startTime":1489928737000,
"endTime":1489928787000,
"updated":1489928737000,
"event":{
"id":4,
"description":"satish's Broadcast",
"type":"BROADCAST_PUBLIC",
"startTime":1489928737000,
"endTime":1489928787000,
"status":"FINISHED",
"eventReminderStatus":"NOT_SENT",
"updatedAt":1489928787000
},
"expectedDuration":0,
"serviceProvider":"agora"
};
class App extends React.Component{
render(){
return(
<div>
Channel Details: {Object.keys(data.channel).map(el=>{
return <p>{el}: {data.channel[el]}</p>
})}
Description: {data.description}
RecordedUrl: {data.recordedUrl}
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>