CODEWITHSUNDEEP
javascriptreactjshtml-lists
M.I
M.I

Reputation: 409

create list using .map

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:

        6
        5
        4
        2

Upvotes: 2

Views: 195

Answers (1)

John Ruddell
John Ruddell

Reputation: 25842

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 :)

Upvotes: 1

Related Questions