#javascript #reactjs #react-native
Вопрос:
Я создаю приложение для упражнений. Как бы я повторил это свойство объектов «suoritusStats» таким образом, чтобы я мог отображать «suoritusStats» таким образом, как «toistot — toistot — toistot», поэтому в этом случае свойство «painot» будет отображаться как «0-0-10», а toistot «10-10-10» по порядку.
На данный момент из последней функции карты я получаю, например, «10», отрисованные один раз, но, как указано выше, мне нужно отрисовывать их таким образом, как описано. Таким образом, «toistot» будет «toistot: 10-10-10», а не «toistot: 10».
Вот моя структура данных (это массив объектов), но я просто сократил ее, чтобы она не была слишком длинной.
Array [
Object {
"pvm": "3. heinäkuuta 2021",
"timestamp": 1625325753617,
"treeni": "Rintatreeni",
"treeniData": Object {
"Punnerrukset": Object {
"id": 0,
"nimi": "Punnerrukset",
"sarjat": "3",
"suoritusStats": Array [
Object {
"painot": "0",
"toistot": "10",
},
Object {
"painot": "0",
"toistot": "10",
},
Object {
"painot": "10",
"toistot": "10",
},
],
},
},
},
]
Вот мое ответное заявление:
{
treenit.map((item, index) => (
<List.Accordion
key={index}
title={<Text small left>{item.pvm} - {item.treeni}</Text>}
left={props => <List.Icon {...props} icon="calendar" color={themeColor} />}
>
{
Object.values(item.treeniData).map(treeni => {
let descSarjat = `Sarjat: ${treeni.sarjat}`;
let descToistot;
let descPainot;
Object.values(treeni.suoritusStats).map((item) => {
descToistot = `Toistot: ${item.toistot}`;
descPainot = `Painot: ${item.painot}`;
})
return(
<List.Item
descriptionNumberOfLines={3}
descriptionStyle={{fontFamily: 'MontserratRegular', color: themeColor}}
titleStyle={{fontFamily: 'MontserratSemiBold', color: themeColor}}
key={treeni.nimi} title={treeni.nimi}
description={`${descSarjat}n${descToistot}n${descPainot}`}
/>
)
})
}
</List.Accordion>
))
}
Заранее благодарю вас за то, что уделили нам время! Оцененный.
Ответ №1:
Попробуйте с этим:
let descToistot =`Toistot: `;
let descPainot= `Painot: `;
treeni.suoritusStats.map((item, i) => {
descToistot = `${i===0?"":"-"}${item.toistot}`;
descPainot = `${i===0?"":"-"}${item.painot}`;
})
Ответ №2:
Если я вас хорошо понимаю, это чистый JS. Ничего с Реакцией.
const arr= [
{
"pvm": "3. heinäkuuta 2021",
"timestamp": 1625325753617,
"treeni": "Rintatreeni",
"treeniData": {
"Punnerrukset": {
"id": 0,
"nimi": "Punnerrukset",
"sarjat": "3",
"suoritusStats": [
{
"painot": "0",
"toistot": "10",
},
{
"painot": "0",
"toistot": "10",
},
{
"painot": "10",
"toistot": "10",
},
],
},
},
},
]
const datas = arr[0].treeniData.Punnerrukset.suoritusStats;
const toistotArr = [];
datas.map(data => toistotArr.push(data.toistot));
const dashedResult = toistotArr.join('-');
console.log(dashedResult);
Ответ №3:
Вот решение для того же самого:
Array.map(({ treeniData = {} }) => {
const { Punnerrukset = {} } = treeniData;
const obj = {};
Object.keys(Punnerrukset).forEach((punnKey) => {
const punnerValue = Punnerrukset[punnKey];
if (Array.isArray(punnerValue)) {
punnerValue.forEach((suorKeys) => {
Object.keys(suorKeys).forEach((val) => {
if (obj[val]) {
obj[val] = "-" suorKeys[val];
} else {
obj[val] = val ":";
obj[val] = suorKeys[val];
}
});
});
} else if (punnKey === "sarjat") {
obj[punnKey] = punnKey ":" punnerValue;
} else {
obj[punnKey] = punnerValue;
}
});
const { painot = "", sarjat = "", toistot = "" } = obj;
return (
<div>
{`${sarjat}n ${painot}n ${toistot}n`}
</div>
);
});