0

Trying to loop inside a loop and getting error: value.forEach is not a function.

Dont know how to write this code inside a render

render(){

    return(
        Object.entries(this.props.detailOras).map(([key, value])=>{

       return(
            <div className="flex-row">
            <div className="flex-cont">
                <div>Laikas</div>
                <div>Temperatūra </div>
                <div>Vėjas</div>  
                <div>Krituliai</div>
            </div>

                {value.forEach(day => {
                    return(
                        <div className="flex-cont">
                            <div>{day.forecastTimeUtc.slice(11,16)}</div>
                                <div>{day.airTemperature} </div>
                                <div>{day.windSpeed}</div>  
                                <div>{day.totalPrecipitation}</div>
                            </div>
                          )
                })}
                     </div>
        )
                }


        ))}
5
  • 1
    What is the value of this.props.detailOras? What are the values of that object? Commented May 28, 2020 at 17:37
  • try this this { !value?null: value.forEach.... Commented May 28, 2020 at 17:44
  • console.log(detailOras): 2020-05-28: forecast: Array(7) 0: {forecastTimeUtc: "2020-05-28 17:00:00", airTemperature: 16.8, windSpeed: 5, windGust: 10, windDirection: 6, …} 1: {forecastTimeUtc: "2020-05-28 18:00:00", airTemperature: 16.4, windSpeed: 4, windGust: 9, windDirection: 4, …} ...... 2020-05-29: {forecast: Array(24)} 2020-05-30: {forecast: Array(22)} Commented May 28, 2020 at 17:44
  • You can click on edit under your question to include that formatted into your question :) Commented May 28, 2020 at 17:49
  • { 2020:05:28:{ forecast:[ 1: [ {airtemp: xx},{windspeed: xx} .....] 2: [ {airtemp: xx},{windspeed: xx} .....] ... ]} Commented May 28, 2020 at 17:54

1 Answer 1

1

Below should work provided value is populated as an array in later stages.

render(){

    return(
        Object.entries(this.props.detailOras).map(([key, value])=>{

       return(
            <div className="flex-row">
            <div className="flex-cont">
                <div>Laikas</div>
                <div>Temperatūra </div>
                <div>Vėjas</div>  
                <div>Krituliai</div>
            </div>
                {(value.forecast || []).map(day => {
                    return(
                        <div className="flex-cont">
                            <div>{day.forecastTimeUtc.slice(11,16)}</div>
                            <div>{day.airTemperature} </div>
                            <div>{day.windSpeed}</div>  
                            <div>{day.totalPrecipitation}</div>
                        </div>
                    )
                })}
            </div>
        )
    }
))}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.