This will be the very much used utility function we almost regularly use.

Depends on the data variety & structuring of data, API response can return much complex JSONs. Sometimes capturing just one field out of whole JSON won't be suffice. We might need to get many fields to show on web page. Traversing such complex JSON wouldn't be a good idea each time. If we can convert that in to simple JSON would be better based on the situation.

I hope this much introduction is enough. Let's jump into actual stuff.

Here, I am taking much nested JSON. I will convert that into to simple JSON.

So, here is my example JSON:

const obj = {
    first: {
        first: '1',
        second: {
            second: true,
            third: {
                third: 'third',
                fourth: {
                    fourth: 4
                }
            }
        }
    }
}

My desired output would be:

{first: '1', second: true, third: 'third', fourth: 4}

Take a look at input and output once again to get idea.

Let's code something to achieve above:

const simpleObj = {};
function destructure(obj) {
    for (let key in obj) {
        const value = obj[key];
        const type = typeof value;
        if (['string', 'boolean'].includes(type) || (type === 'number' && !isNaN(value))) {
            simpleObj[key] = value;
        } else if (type === 'object') {
            Object.assign(simpleObj, destructure(value));
        }
    }
    return simpleObj;
}

console.log(destructure(obj));

for (let key in obj) { -> Which iterates over given object.

const value = obj[key];
const type = typeof value;

capturing actual value and its type.

if (['string', 'boolean'].includes(type) || (type === 'number' && !isNaN(value))) {
            simpleObj[key] = obj[key];

Validating if the value of key is not an object. Copying to sampleObj obj if it's not an object.

else if (typeof obj[key] === 'object') {
            Object.assign(simpleObj, destructure(obj[key]));
        }

In case of object, calling the same function again (called recursion) to go to nested levels of the object. Also, assigning everything to sampleObj. Hence this single object would contain all the key value pairs at the end.

Lastly, returning that object and printing that to console.

I would appreciate suggestions, if we can achieve this in even more best way. Thanks.

💎 Love to see your response

1. Like - You reached here means. I think, I deserve a like.
2. Comment - We can learn together.
3. Share - Makes others also find this resource useful.
4. Subscribe / Follow - to stay up to date with my daily articles.
5. Encourage me - You can buy me a Coffee

Let's discuss further.

1. Just DM @urstrulyvishwak

2. Or mention
   @urstrulyvishwak

For further updates:

Follow @urstrulyvishwak