Преобразовать объект в объекте в массив и вывести его в рендер

Рейтинг: 0Ответов: 1Опубликовано: 25.02.2023
const InputSelector:React.FC = () => {
const [selectItem, setSelectItem] = useState('')
const dispatch = useAppDispatch()
const {currency} = useAppSelector(state => state.currencySlice)

console.log(currency)
// base:   "RUB"
// date  :   "2023-02-23"
// disclaimer  :   "https://www.cbr-xml-daily.ru/#terms"
// rates  :   {AUD: 0.019572, AZN: 0.022755, GBP: 0.0110267, AMD: 5.226708, BYN: 0.03745346, …}
// timestamp  :   1677099600 // Это изначальный объект

const key = Object.keys(currency)
const valueC = Object.values(currency)
const dataEnt = Object.entries(valueC)
const dataEntRates = valueC[4]

console.log( dataEntRates)
// AED: 0.049164
// AMD: 5.226708
// AUD: 0.019572
// AZN: 0.022755 // получаю такие данные, это объект их как раз и нужно отрендерить ниже именно ключ тобишь AUD, AMD, AED списком опций в from, и to
// BGN: 0.0245499985
// BRL: 0.06961558
// BYN: 0.03745346


return (
    <div className='Selected'>
        <h1 className='Selector-text'>Вы переводите из</h1>
        <select  className='Selector-up' onChange={event => setSelectItem(event.target.value)}>
            {dataEnt?.map((res:any, id:number) => <option key={id} value={res}>from</option>)}
        </select>
        <p className='Selector-text'>в</p>
        <select
            className='Selector-up'
            onChange={event => setSelectItem(event.target.value)}
        >{dataEnt?.map((res:any, id:number) => <option key={id}>to</option>)}</select>
    </div>
)

}

javascript reactjs
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Если ваш исходный объект выглядит так, как указано ниже, то можно воспользоваться Object.entries для превращения объекта в массив

const currency = {
    base:   "RUB",
    date  :   "2023-02-23",
    disclaimer  :   "https://www.cbr-xml-daily.ru/#terms",
    rates  :   {AUD: 0.019572, AZN: 0.022755, GBP: 0.0110267, AMD: 5.226708, BYN: 0.03745346},
    timestamp  :   1677099600, // Это изначальный объект
}

Object.entries(currency.rates).forEach(item => {
    console.log(item[0], item[1])
})

Соответственно, ваш компонент будет выглядеть так:

const {currency} = useAppSelector(state => state.currencySlice) // получаем данные

// в методе рендер
<select
    className='Selector-up'
    onChange={event => setSelectItem(event.target.value)}
>
    {Object.entries(currency.rates)?.map((res:any) => <option key={res[0]} value={res[1]}>from {res[0]}</option>)}
</select>
<p className='Selector-text'>в</p>

<select
    className='Selector-up'
    onChange={event => setSelectItem(event.target.value)}
>
    {Object.entries(currency.rates)?.map((res:any) => <option key={res[0]} value={res[1}>to {res[0]}</option>)}
</select>