React display json key and value

Question

I am trying to read a JSON data : and i got this error Element implicitly has an 'any' type because expression of type 'string' can't be used to the index type my data is local josn file and I am importing them :

{
    "user": {
      "name": "foo",
      "location": "India",
       
    },
    "product": {
        "name": "Iphone",
        "version": "12",
      }
}

i am displaying like this

const data =data;

            <div>
              {Object.keys(data.user).map((key,i) => (
                <p key={i}>
                    <span>{key}</span>
                    <span>{data.user[key]}</span>
                </p>))}
           </div>

every thing is working except for this line :

<span>{data.user[key]}</span>

it gives error :

Element implicitly has an 'any' type because expression of type 'string' can't be used to the index type
No index signature with a parameter of type 'string' was found on type

Seems there is no error. I've tried it in Codesanbox.

ridoansaleh
– ridoansaleh

2020-11-20 10:40:21 +00:00
Commented Nov 20, 2020 at 10:40 — ridoansaleh
– ridoansaleh, Commented Nov 20, 2020 at 10:40

Blackfaded · Accepted Answer · 2020-11-20 13:19:00Z

2

You could cast the keys to their keys in the object like so:

{(Object.keys(data.user) as (keyof typeof data.user)[]).map((key, i) => (
  <p key={i}>
    <span>{key}</span>
    <span>{data.user[key]}</span>
  </p>
))}

answered Nov 20, 2020 at 13:19

Blackfaded

4263 silver badges12 bronze badges

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

Comments

Joshua · Accepted Answer · 2020-11-20 11:10:15Z

0

Just cast key to type any:

<span>{data.user[key as any]}</span>

answered Nov 20, 2020 at 11:10

Joshua

6511 gold badge6 silver badges19 bronze badges

Comments

Sarun UK · Accepted Answer · 2020-11-20 11:40:17Z

0

Define type for data like below

const data: { [key: string]: { [key: string]: string } }

Working code - https://codesandbox.io/s/distracted-hopper-2vowh?file=/src/App.tsx:205-212

answered Nov 20, 2020 at 11:40

Sarun UK

6,7667 gold badges26 silver badges52 bronze badges

Comments

Micah Katz · Accepted Answer · 2022-06-22 16:02:07Z

0

If you have an array of objects that contain strings, you can do what I did.

const rows: { [key: string]: string }[] = [
    {
        id: 'load-balancer-1',
        name: 'Load Balancer 1',
        rule: 'Round robin',
        status: 'Starting',
        other: 'Test',
        example: '22',
    },
    ...
];

answered Jun 22, 2022 at 16:02

Micah Katz

1906 bronze badges

Collectives™ on Stack Overflow

React display json key and value

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related