How to separate items from array?

user_12881707 0
Viewed 71

I'm making weather app for 7 days and I need to create abillity for users to open some of days to see more information about weather of current day. So, it means that every item choosen by user has to contain unique id (i don't know could I use in this situation index instead of id) to show information only about some of day. So before this I had some code:

const DailyWeatherData = ({dailyData, isLoading}) => {

    const getWeatherStatistic = (value0,value1) => {
        if(dailyData && Array.isArray(dailyData.daily)){
            return (
                <div className="col-lg-3 box-daily-weather">
                    <NavLink to={'/WeatherDayStat'}>
                        {setDay([value1])}
                        <div className="temp-day">{Math.ceil(dailyData.daily[value0].temp.day)}°C</div>
                        <div className="feels-like">Feels like: {Math.ceil(dailyData.daily[value0].feels_like.day)}°C</div>
                        <div className="daily-weather-condition">Conditions: {dailyData.daily[value0].weather.map(e => e.main)}</div>
                    </NavLink>
                </div>
            )
        }else {
            return isLoading === true ? <Preloader /> : null
        }
    }

    const setDay = (param) => {
        return checkCod ? null : setCurrentDate(new Date(),param)
    }

    return ( 
        <div> 
            <div className="daily-weather-container">
                {checkCod ? null : <div className="daily-title">Daily Weather</div>}
                <div className='row scrolling-wrapper justify-content-center'>
                    {getWeatherStatistic(1,1)}
                    {getWeatherStatistic(2,2)}
                    {getWeatherStatistic(3,3)}
                    {getWeatherStatistic(4,4)}
                    {getWeatherStatistic(5,5)}
                    {getWeatherStatistic(6,6)}
                </div>
            </div> 
        </div>
    )
}

export default DailyWeatherData

In function getWeatherStatistic you can see 2 arguments, value0 - doesn't matter here, value1 - using to show only 1st-6 object, because array which i have got from ajax request contains more days(10) but I need to show only 6 of them. And most importantly, each of them is separate. Logically I'd use map, but It shows all items, so I can use slice but it also shows 6 items in 1 column.

The next problem, this array has not contain parameter like ID, that's why I can't add to NavLink id. If there were ID, I would make something like that dailyData.daily.map(p => <NavLink to={'/WeatherDayStat' + p.id}>)

Also, just in case, add the state code (daily - array which I need):

So I have 2 questions:

  1. How to show only 6 days from array?
  2. How to add unique ID to every Item from array?
react-redux redux reactjs ajax javascript
2 Answers

Making something like this:

//making new array with data I need
let sliceDailyData = dailyData.daily ? dailyData.daily.slice(1,7) : null

//using map with new array
 {sliceDailyData ? sliceDailyData.map((i) => <div key={i.dt} className="col-lg-3 box-daily-weather">
                            {getCurrentDate(new Date())}
                            <NavLink to={'/WeatherDayStat'}>
                                <div className="temp-day">{Math.ceil(i.temp.day)}°C</div>
                                <div className="feels-like">Feels like: {Math.ceil(i.feels_like.day)} °C</div>
                                <div className="daily-weather-condition">Conditions: {i.weather.map(i => i.main)} </div>
                            </NavLink>
                        </div>
                   ): null}

Speaking about ID, I have created variable which generte id and push it to array.

user_128817070

You can store your dailyData.daily array in an object and then retrieve it with key, you can use something simple but SEO friendly like obj['day'+(dailyData.daily.indexOf(d)+1)] 

obj{}
dailyData.daily.forEach(d=>array.indexOf(d)<=5?obj[String(Math.random())]=d:null)
user_99220110
Related