Loop values in Typescript

Question

I am using nextjs, React and Typescript. I want to loop out values from an array of objects. My

data.json:

[
    {
      "id": "value”,
      “name": “value”, 
      “type”: “value”
    },
    {
      "id": “value”,
      “name": “value”, 
      “type": “value”
    }
]

cars.map is not a function.

I didn't understand what stops you from iterate over the cars array. Why can't you do something like cars.map(car => Object.keys(car) ...)? — Marco Nisi
– Marco Nisi, Commented Dec 15, 2021 at 21:57
I get the data but mapping it gives ".map is not a function" — l14045
– l14045, Commented Dec 15, 2021 at 23:06
Ok, so maybe you need to do JSON.parse(cars) then you should have a real array. — Marco Nisi
– Marco Nisi, Commented Dec 16, 2021 at 9:09

Sators · Accepted Answer · 2021-12-15 22:01:58Z

1

Everything in your code appears to be properly typed. If you want to display values from your Cars array, you could map over the cars array, similarly to:

const IndexPage: NextPage<{ cars: Cars[] }> = ({ cars }) => {
  return (
    <div>
      <h1>IndexPage</h1>
      {cars.map(car => <div key={car.id}>{car.name}: {car.type}</div>)}
    </div>
  )
}

An array of React JSX generated by a map function need to have unique keys added on the parent tag of the map output. See Lists and Keys for more detail. For more detail on Map, see Array.prototype.map()

answered Dec 15, 2021 at 22:01

Sators

3,1661 gold badge25 silver badges29 bronze badges

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

5 Comments

l14045 Over a year ago

{cars} shows me the data but cars.map gives undefined

Sators Over a year ago

When you say cars shows you the data, what variable type is it? If cars is truly an array, cars.map would not be undefined. Be sure you are copying the code as-is above, not wrapping the <div> with the car values in curly brackets.

l14045 Over a year ago

typeof(cars) is a string!

David Mališ Over a year ago

JSON.parse(cars) should give you an JSON array you need.

l14045 Over a year ago

amazing thank you!

Collectives™ on Stack Overflow

Loop values in Typescript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related