Storing and Getting array of objects in Reactjs

Question

I am storing each response entity in object then pushing them in array where case 1 is working while case 2 is not.

Case 1 dummy data from external JSON file:

 const {addEvent} = this.props
         var airportList= FlightInfo.Airport; //FlightInfo carries data in JSON 
                                              //file
        var newEvents=[];

        for(var rootKey in airportList){
          if(rootKey===airportValueSelected)
           { 

               airportList[rootKey].forEach(element => {


                   if(element.flight_no===flightValue){

                     for(var m=0;m<element.Events.length;m++){
                    var singleEvent={
                    event_name:'',
                    date_time:'',
                    status:'',
                    }

                      singleEvent.event_name=element.Events[m].event_name;
                      singleEvent.date_time=element.Events[m].date_time;
                      singleEvent.status=element.Events[m].status;
                      newEvents.push(singleEvent);
                    }

                    for(var s=0;s<element.Alerts.length;s++){

                      newAlerts.push(element.Alerts[s]["Alert"+(s+1)]);

                    }

                   }

               });
               addEvent(newEvents);

The console result from Case 2:

Above response if you look closely I am getting [{...}]

Now Case 2 from Server response

axios.get('http://localhost:6020/fetchData?name='+data1+'&flight_no='+data2+'&date='+data3)

               .then(res=>{
               console.log(res);
               console.log(res.data.resultSet);
               if(res.data.error==null || res.data.error===""){
                 res.data.resultSet.forEach(element => {
                   var singleEvent={
                     completionIntent:'',
                     Name:'',
                     flightno:'',
                     date:'',
                     audioFileName:'',
                     status:'',
                   };

                   singleEvent.airportName=element.airportName;
                   singleEvent.completionIntent=element.completionIntent;
                   singleEvent.audioFileName=element.audioFileName;
                   singleEvent.flightno=element.flightno;
                   singleEvent.departureDate=element.departureDate;
                   singleEvent.status='On-time';
                   newEvents.push(singleEvent);
                 });

               }
           }).catch((e)=>console.log("Can’t access"+e));
           console.log(newEvents);
           addEvent(newEvents);

The console result from Case 2:

Now in second case when I pass these newEvents to B(main) component and then to C component it becomes empty when I try to get value {this.props.events}

B Component:

export default class userLogin extends Component {
    constructor() {
        super();
        this.state = {
            events:[],
        };

      }

      addEvent = newEvent => this.setState({
        events: newEvent
      });

  render(){
        const {events} = this.state

        return(

                    <SearchFlight events={events} alerts={alerts} addAlert={this.addAlert} addEvent={this.addEvent} />

                    <Events events={events}/>

        );

    }

UPDATE: ADD EVENT COMPONENT

render(){
       console.log("this event:"+this.props.events);
        return(
            <div style={{display:'block',}}>
            <div className="row" >

            {this.props.events.map((event) =>
               (
                <div className="col-xs-3 col-sm-3 col-md-3 col-lg-3" key={event.completionIntent}  >
               <Card style={{minWidth : '275px', backgroundColor:'#F5F5F5', marginBottom:'10px', marginRight:'2px',}}>
                    <CardContent>
                        <Typography style={{fontSize:'14px',}} color="textSecondary" gutterBottom>
                        <p style={{fontSize:'20px',width:'78px', marginBottom:'0px',float:'right',}} >{event.status}</p>
                        </Typography>
                        <Typography variant="h5" component="h2" style={{fontWeight:'bold',}}>
                         {event.airportName.toUpperCase()}
                        </Typography>
                        <Typography style={{marginBottom:'12px'}} color="textSecondary">
                        Event
                        </Typography>
                        <Typography component="p" style={{color: event.status==='On-time'?'#33691E':event.status==='Delayed'?'#D50000':'grey', fontSize: '12px',}}>
                        {event.departureDate}
                        <br />
                        </Typography>
                    </CardContent>
                    <CardActions>
                        <Button size="small">Download Audio {event.audioFileName}</Button>
                    </CardActions>
                </Card>
                </div>
                ))}
            </div>
            </div>
        );
    }

Problem: Getting empty props events when passing to Events component. Case 1 is working fine but I didn't change anything except add few more objects and it stops working

In which component you are calling the API and on which life cycle method you are calling can you please paste the code for thes — Harish Soni, Jan 03 '19 at 12:00
@HarishSoni but I am not using lifecycle methods to defined or set newEvents it is declared inside `handleSubmit` method and case 1 and case 2 are the part of code from `handleSubmit` — Kramer, Jan 03 '19 at 12:06
@HarishSoni [{..}] result after adding in case 1 and [] result after adding in case 2....if I check the length in case 2 it's zero but if there is no data then what's I am receiving look in the image — Kramer, Jan 03 '19 at 12:07
@HarishSoni see method handle submit I have added the whole code for that component since it's a lot of code therefore look that particular method — Kramer, Jan 03 '19 at 12:12
You need to use `componentWillReceiveProps` in your `Events` Component and then map your props to the state; — Harish Soni, Jan 03 '19 at 12:32
but in case 1 it worked without any issue since in B component you can see I am passing events as prop value and printing {this.props.events} but nothing I am getting. Can you tell me by looking at the image what [] and [{...}] make a difference even I did the same thing almost and one has length zero while other has a length and if it has zero length then where is that data lying which is showing in case 2 image???????? — Kramer, Jan 03 '19 at 12:35
@HarishSoni My question is this https://stackoverflow.com/questions/42260524/array-length-is-zero-but-the-array-has-elements-in-it with my problem context — Kramer, Jan 03 '19 at 12:39
When you console.log something it prints the initial value. but it continuously checks for the modified value of the same. now when you expand the same you get the elements in it. This is the default behavior of chrome. — Harish Soni, Jan 03 '19 at 12:44
@HarishSoni what I am saying is I did exactly same in case 1 but it is working.....and I am not getting anything in case 2 in prop value of events — Kramer, Jan 03 '19 at 12:46
@HarishSoni I resolved it by placing the `addEvent(newEvents)` method inside the forEach loop. I don't know the working but it did the work for me — Kramer, Jan 04 '19 at 06:57

Storing and Getting array of objects in Reactjs

0 Answers0