Js loop through array of objects issue

[shiro1]

Hi,

I have an array which looks like this : let x = [{ pulse: 140 }, { oxygenSaturation: 89 }, { respiratoryRate: 35 }, { systolic: 80 }, { temperature: 40 }];

My code :

const Vitals: React.FC<VitalsComponentProps> = ({ vitals, patientUuid }) => {
  const { t } = useTranslation();

  let x = [{ pulse: 140 }, { oxygenSaturation: 89 }, { respiratoryRate: 35 }, { systolic: 80 }, { temperature: 40 }];
  console.log('vitals', x);

  return (
    <div>
      {x.length ? (
        x.map((vital: PatientVitals, ind) => (
          <div>
            <Grid className={styles.grid}>
              <Row>
                <Tile light>
                  <p>Temp</p>
                  <div className={styles.vitalValues}>
                    <p>
                      {vital.temperature} : {ind}
                    </p>
                    <p className={styles.unit}>°C</p>
                  </div>
                </Tile>
                <Tile light>
                  <p>Bp</p>
                  <div className={styles.vitalValues}>
                    <p>{vital.diastolic}</p>
                    <p className={styles.unit}> mmHg</p>
                  </div>
                </Tile>
                <Tile light>
                  <p>Heart rate</p>
                  <div className={styles.vitalValues}>
                    <p>{vital.pulse}</p>
                    <p className={styles.unit}>bpm</p>
                  </div>
                </Tile>
              </Row>

              <Row>
                <Tile light>
                  <p>Sp02</p>
                  <p>{vital.oxygenSaturation}</p>
                  <p className={styles.unit}>%</p>
                </Tile>
                <Tile light>
                  <p>R. Rate</p>
                  <p>{vital.respiratoryRate}</p>
                  <p className={styles.unit}>/ min</p>
                </Tile>
              </Row>

              <Row>
                <Tile light>
                  <p>Height</p>
                  <p>{vital.height}</p>
                  <p>cm</p>
                </Tile>
                <Tile light>
                  <p>Bmi</p>
                  <p>{vital.bmi}</p>
                  <p className={styles.unit}>kg / m²</p>
                </Tile>
                <Tile light>
                  <p>Weight</p>
                  <p>{vital.weight} </p>
                  <p className={styles.unit}>kg</p>
                </Tile>
              </Row>
            </Grid>
            <p className={styles.unit}>Sally Garnatt · 14:21</p>
          </div>
        ))
      ) : (
        <div>
          <p className={styles.emptyText}>Vitals has not been recorded for this patient for this visit</p>
          <Button
            size="small"
            kind="ghost"
            renderIcon={ArrowRight16}
            onClick={() => navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/chart` })}
            iconDescription={t('vitalsForm', 'Vitals form')}>
            {t('vitalsForm', 'Vitals form')}
          </Button>
        </div>
      )}
    </div>
  );
};

I am trying to obtain the values and display them in different tiles, but my table is drawn seven times despite the fact that i am looping through my array. What im i doing wrong.
Any advice/recommendations will be appreciated.

[Marmiz]

@shiro1

but my table is drawn seven times despite the fact that i am looping through my array

But that’s exactly what the map method does:
To loop over each element of the array and for Each element draw the table.

Perhaps you want to reduce the array as a single object with all your info there, and then loop for each key?
So something like?

 { pulse: 140, systolic: 80, ....}

Object.entries.map((key, value) => <p>{key}: {value}</p>)

[b-bhupendra]

  let x = [{ pulse: 140 }, { oxygenSaturation: 89 }, { respiratoryRate: 35 }, { systolic: 80 }, { temperature: 40 }];
  console.log('vitals', x);

convert it to
let x = [{ pulse: 140 , oxygenSaturation: 89, respiratoryRate: 35 }, { systolic: 80, temperature: 40 }];

to get the intended result you want

if the data coming from a source that you dont control so do it like this

let source = {}
let x = vitals.map(val=>{
Object.assign(source,val);
}
console.log(source)// it will have all your properties there to quickly acess it

return 
(<div>
            <Grid className={styles.grid}>
              <Row>
                <Tile light>
                  <p>Temp</p>
                  <div className={styles.vitalValues}>
                    <p>
                      {source.temperature} : {ind}
                    </p>
                    <p className={styles.unit}>°C</p>
                  </div>
                </Tile>
                <Tile light>
                  <p>Bp</p>
                  <div className={styles.vitalValues}>
                    <p>{source.diastolic}</p>
                    <p className={styles.unit}> mmHg</p>
                  </div>
                </Tile>
                <Tile light>
                  <p>Heart rate</p>
                  <div className={styles.vitalValues}>
                    <p>{source.pulse}</p>
                    <p className={styles.unit}>bpm</p>
                  </div>
                </Tile>
              </Row>

              <Row>
                <Tile light>
                  <p>Sp02</p>
                  <p>{source.oxygenSaturation}</p>
                  <p className={styles.unit}>%</p>
                </Tile>
                <Tile light>
                  <p>R. Rate</p>
                  <p>{source.respiratoryRate}</p>
                  <p className={styles.unit}>/ min</p>
                </Tile>
              </Row>

              <Row>
                <Tile light>
                  <p>Height</p>
                  <p>{source.height}</p>
                  <p>cm</p>
                </Tile>
                <Tile light>
                  <p>Bmi</p>
                  <p>{source.bmi}</p>
                  <p className={styles.unit}>kg / m²</p>
                </Tile>
                <Tile light>
                  <p>Weight</p>
                  <p>{source.weight} </p>
                  <p className={styles.unit}>kg</p>
                </Tile>
              </Row>
            </Grid>
            <p className={styles.unit}>Sally Garnatt · 14:21</p>
          </div>
        ))
      ) : (
        <div>
          <p className={styles.emptyText}>Vitals has not been recorded for this patient for this visit</p>
          <Button
            size="small"
            kind="ghost"
            renderIcon={ArrowRight16}
            onClick={() => navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/chart` })}
            iconDescription={t('vitalsForm', 'Vitals form')}>
            {t('vitalsForm', 'Vitals form')}
          </Button>
        </div>
      )}
    </div>)