Перебор объекта и рендеринг данных

#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>
      );
    });