Js loop through array of objects

Question

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 / m2</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 in the objects 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.

enter image description here

• Andy: For each object in the array you are creating a new table. As you can see only one value in each table is present, all the other cells are have no value. You should probably merge your array into an object and then map over its Object.entries instead.

Answer 1

your array should look like

[{
pulse:140,
oxygenSaturation:89,
systolic:80
}]