React iterate recursively through nested objects

Question

i'm trying to iterate recursively over nested objects to get the key and the value.

My data structure is:

  {         
    "id": 8743077530231325861,
    "name": "Name of XYZ",
    "key X": 0,
    "key Y": {
      "details": {
        "value": {
          "up": 5,
          "down": 3
        },
        "path": "xyz"
      },
      "key Z": {
        "value": 1,
        "path": "abc"
      }
    },
    "createdTimestamp": 1554446703000
  }

and my function is:

  recursion = (item, keyString) => {
    if(isObject(item)){
      Object.keys(item).map((key) => {
        return this.recursion(item[key], keyString+`.${key}`)
      })
    }else{
      return {item, keyString}
    }
  }

and i call it by:

Object.keys(data).map(key =>{
   console.log(this.recursion(data[key], key))
})

My problem is that keys which are objects are always undefined. I know thats because they need to iterate an other time and the output is faster then the function. When i print out the values at the end of the recursion function instead of returning them, they are not undefined.

At the end i want for every key all the deepest values and "paths". For Example

8743077530231325861,"id"
Name of XYZ,"name"
0, "keyX"
5, "keyY.details.value.up"
...

I already tried to use await / async but i cant manage to get all values

would be nice if someone have a hint for me

You are not returning anything in if(isObject(item)){ ... }. Update Object.keys(item).map to return Object.keys(item).map and it should work — Rajesh Dixit
– Rajesh Dixit, Commented Apr 9, 2019 at 13:31
@MaheerAli i want to get the deepest nested item and the path. First Ouput = 8743077530231326000, id, Second: Name of XYZ, name, Thrid: 5, keyY.details.value.up — Stevetro
– Stevetro, Commented Apr 9, 2019 at 15:02

Nina Scholz · Accepted Answer · 2019-04-09 17:31:05Z

1

You need to return the result of mapping.

const
    isObject = v => v && typeof v === 'object',
    recursion = (item, path = '') => isObject(item)
        ? Object
            .keys(item)
            .flatMap(k => recursion(item[k], path + (path && '.') + k))
        : { item, path };

var data = { id: 8743077530231326000, name: "Name of XYZ", "key X": 0, "key Y": { details: { value: { up: 5, down: 3 }, path: "xyz" }, "key Z": { value: 1, path: "abc" } }, createdTimestamp: 1554446703000 },
    result = recursion(data);

console.log(result);

edited Apr 9, 2019 at 17:31

answered Apr 9, 2019 at 13:39

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

3 Comments

Stevetro Over a year ago

but this way its returning the Object as Arrays. I want to call for every key in the Object again the recursion to just print out the deepest item + key pair. Like: 5, keyY.details.value.up, 3, keyY.details.value.down etc

Nina Scholz Over a year ago

please add the wanted result to the question. btw, the question does not state that the deepest object is needed. what about if you have more than one?

Stevetro Over a year ago

i added the wanted result

Collectives™ on Stack Overflow

React iterate recursively through nested objects

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related