create list using .map

Question

so basically i have this data:

const testMeasurments = [
  {
  data:[
  {name:"glucose",value:6,fill:'#57c0e8'},
  {name:"SpO2",value:5,fill:"#FF6565"},
  {name:"Blood Pressure",value:4,fill:"#FFDA83"},
  {name:"Body Weight",value:2,fill:"purple"}
  ]
}
]

what i want is to create an unordered list of values from this data. what i need is something like this:

<ul>
{testMeasurments.map(s=>
        <li>{s.data.value}</li>
)}
</ul>

to produce this:

And how have you tried to achieve this so far?

Scott Sauyet
– Scott Sauyet

2020-06-22 18:28:21 +00:00
Commented Jun 22, 2020 at 18:28 — Scott Sauyet
– Scott Sauyet, Commented Jun 22, 2020 at 18:28

John Ruddell · Accepted Answer · 2020-06-22 18:59:37Z

1

You need to iterate over both arrays to get to what you want to do.

<ul>
  { testMeasurments.map(
    s => s.data.map(
      m => <li>{m.value}</li>
    )
  )}
</ul>

See it live

Sometimes visualizing the data structure helps, I like to use Typescript to define the structure.

interface Measurement {
  data: MeasurementResult[]
}
interface MeasurementResult {
  name: string
  value: number
  fill: string
}

Here testMeasurments is of the same form as a Measurement[]. Meaning testMeasurments is an array of measurements. Each measurement has an array of "results". that is the inner array you are trying to get to :)

edited Jun 22, 2020 at 18:59

answered Jun 22, 2020 at 18:30

John Ruddell

25.9k7 gold badges60 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

create list using .map

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related