Breaking News: Grepper is joining You.com. Read the official announcement!

turns object to array and map key and values

Doyin Atobaru answered on November 27, 2024 Popularity 7/10 Helpfulness 1/10

answer turns object to array and map key and values

turns object to array and map key and values

Comment

import { getUnit } from '@/lib/utils'
import React from 'react'

const ForecastVisual = ({ data }: { data:any }) => {

    console.log('forecast data', data)
    // turns object to array
    const array:any = Object.keys(data).map(key => new Object({ [key]: data[key] }))

    console.log('array:', array)
    const gridCols = Math.min(array.length, 12)

    return (
        <section className="px-4">
            <div
                className={`text-center text-slate-500 p-4 grid gap-8 md:gap-4 place-items-center max-md:grid-cols-1 grid-cols-${gridCols}`}
            >
                {array.map((weather, index) => {
                    // Check if it's the last item
                    const isLastItem = index === array.length - 1

                    return Object.entries(weather).map(([key, value]) => (
                        <p className={`w-full ${!isLastItem ? 'md:border-r border-gray-200' : ''}`}>
                            <span className="capitalize">{key.replace(/[-_]/g, ' ')}</span>
                            <span className="block text-2xl lg:text-4xl text-purple-700">
                                {typeof value === 'number' ? value?.toFixed(2) : '--'}{' '}
                                {getUnit(key)}
                            </span>
                        </p>
                    ))
                })}
            </div>
        </section>
    )
}

export default ForecastVisual

Popularity 7/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript key map object

Link to this answer
Share Copy Link

Contributed on Nov 27 2024

Doyin Atobaru

0 Answers Avg Quality 2/10

turns object to array and map key and values

Contents

More Related Answers

turns object to array and map key and values

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.