Object.keys is returning index value for json object

Question

I have one json object as below :

{
  "firstObject": [
    {
      "element": ".branding",
      "details": "Hello"
    },
    {
      "element": "button.login",
      "details": "Hi "
    },
    {
      "element": "#step3",
      "details": "How are you "
    }
  ],
  "secondObject": [
    {
      "element": ".branding",
      "details": "Hello"
    },
    {
      "element": ".step12",
      "details": "Hi "
    },
    {
      "element": "#step2",
      "details": "How are you "
    }
  ]
}

And I have below function where above object is passed as parameter (steps):

function getStateSteps (state, steps) {
    console.log('TESTTT  1', steps);
    let x = Object.keys(steps);
    console.log('TESTTT  2', x);
}

Here, In TESTTT 2 log, 'x' is returning index values of strings instead of key of JSON object.But when I am checking for same object in browser console I am getting the correct output. I have attached the screenshot of my browser console. Can someone please point out what is going wrong?

console screenshot

Can you check it again? Given your input it seems to work as you expect. Make sure you pass the correct object to your function. — Cata John
– Cata John, Commented Oct 9, 2018 at 5:22
It looks like you didn't parse the JSON you retrieved, ie JSON.parse(steps) or you didn't parse before passing the value to the function. So you are just passing around the JSON text string not an object — Patrick Evans
– Patrick Evans, Commented Oct 9, 2018 at 5:24
It is working as expected. what are you trying to achive actually ? — Narendra
– Narendra, Commented Oct 9, 2018 at 5:27
@Narendra, As mentioned by Platinum Industry below I did JSON.parse and it worked. I was trying to get the key of JSON object. Object.keys was working perfectly in console but looks like when I am using inside function I need to parse the object before passing to Object.keys parameter. Thanks! — Rajat
– Rajat, Commented Oct 9, 2018 at 6:44
@PatrickEvans..Yeah..I added JSON.parse and its working. Thanks! — Rajat
– Rajat, Commented Oct 9, 2018 at 6:45

Nelson Owalo · Accepted Answer · 2018-10-09 05:32:46Z

2

Check it again. I have just tried it in my console and it prints exactly as expected.

Try JSON.parse(steps) before using the json object and see if that helps.

function getStateSteps (state, steps) {
    steps = JSON.parse(steps)
    console.log('TESTTT  1', steps);
    let x = Object.keys(steps);
    console.log('TESTTT  2', x);
}

edited Oct 9, 2018 at 5:32

answered Oct 9, 2018 at 5:26

Nelson Owalo

2,41423 silver badges39 bronze badges

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

2 Comments

Rajat Over a year ago

Thanks. It worked. but any idea why and how it was returning the array of index?

Nelson Owalo Over a year ago

@dev it will still print the array as a string in chrome console if you log it. But its just a string, not a json object, thats why you couldnt manipulate it in your code

Lachlan Young · Accepted Answer · 2018-10-09 05:40:13Z

0

This works fine:

const data = {
  "firstObject": [
    {
      "element": ".branding",
      "details": "Hello"
    },
    {
      "element": "button.login",
      "details": "Hi "
    },
    {
      "element": "#step3",
      "details": "How are you "
    }
  ],
  "secondObject": [
    {
      "element": ".branding",
      "details": "Hello"
    },
    {
      "element": ".step12",
      "details": "Hi "
    },
    {
      "element": "#step2",
      "details": "How are you "
    }
  ]
};

function getStateSteps (state, steps) {
    console.log('TESTTT  1', steps);
    let x = Object.keys(steps);
    console.log('TESTTT  2', x);
}

getStateSteps(null, data);

Have you stripped this from a broader implementation and perhaps missed a key function?

Whats your dev environment?

answered Oct 9, 2018 at 5:40

Lachlan Young

1,35413 silver badges15 bronze badges

2 Comments

Rajat Over a year ago

Yeah..As mentioned by Platinum Industry I was missing JSON.parse .Thanks!

Lachlan Young Over a year ago

Glad that was it!

sucicf1 · Accepted Answer · 2022-08-01 07:41:08Z

0

This can happen when the key was not put inside quotation "" One more example is if you are using for (a in Object.keys(ob)) then a contains the keys of the subobjects of ob so the correct way is for(a in ob)

edited Aug 1, 2022 at 7:41

answered Jul 31, 2022 at 19:47

sucicf1

3654 silver badges10 bronze badges

Comments

TheManOfSteell · Accepted Answer · 2023-08-24 15:37:16Z

0

Let me explain why a JSON array would return numeric index values instead of the KEY when using Object.keys.

If your JSON is an array of objects like so...

const thisExample = [ {keys:values}, {keys:values}, {keys:values} ]

then notice that 'thisExample' is just an array[]. So each object{} in that array is at an index within that array, starting at 0 and counting up from there. Technically index values in an array are Keys also. So Object.key is returning that index, or key, value of that array.

Object.keys isn't smart. It gets the index value, which again is also a key. You need to tell it to go deeper and get the keys within the object {}.

edited Aug 24, 2023 at 15:37

answered Aug 20, 2023 at 3:17

TheManOfSteell

1091 silver badge10 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Object.keys is returning index value for json object

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related