Best way to parse the Json in javascript and get the key / value

Question

I am trying to parse the below JSON (format), flatten it out and get the required key / value (output) as mentioned below. I am trying to figure out the best way to do that.

I need to get the displayName and its corresponding parent

For Ex: Features: taxoFeatures

Input:

 {
          "Shop": {
            "subFilter": [
              {
                "taxoFeatures": {
                  "displayName": "Features"
                }
              },
              {
                "color_base": {
                  "displayName": "Colour"
                }
              }
            ],
            "displayName": "Shopping"
          },
          "Support": {
            "subFilter": [
              {
                "contentType": {
                  "displayName": "Content"
                }
              }
            ],
            "displayName": "Support documents"
          }
        }

Expected output:

    {
        "Shopping": "Shop",
        "Features":"taxoFeatures",
        "Colour":"color_base",
        "Content":"contentType",
        "Support documents":"Support"
        }

I was thinking of looping through the JSON and find the key and add the corresponding key and displayName value (and then loop through each child array and store those values as well). Any other ideas?

     let customName = {};
    for (const key in filter) {
            if (filter.hasOwnProperty(key)) {
                const value = filter[key];
                 if (isNotEmpty(value.displayName)) {
                    customName[value.displayName] = key;
                }
            }
        }

What really matters here is understanding the pattern of what you're looking for, then you can create an algorithm that works. I'm not easily seeing what the pattern is for the data you are collecting. If it's something that is specific and unique in each situation, it's going to be difficult to write an all-encompassing function to extract whatever data you need. — Sam
– Sam, Commented Mar 21, 2017 at 19:43

trincot · Accepted Answer · 2017-03-21 19:57:04Z

You could use this recursive function which builds up the result object using reduce and Object.assign:

function transform(filter) {
    return Object.keys(filter).reduce( (acc, key) => {
        const value = filter[key];
        if (Object(value) === value) { // it's an object
            if ('displayName' in value) {
                acc[value.displayName] = key;
            }
            Object.assign(acc, transform(value)); // recurse
        }
        return acc;
    }, {});
}

// Sample input
const filter = {
  "Shop": {
    "subFilter": [
      {
        "taxoFeatures": {
          "displayName": "Features"
        }
      },
      {
        "color_base": {
          "displayName": "Colour"
        }
      }
    ],
    "displayName": "Shopping"
  },
  "Support": {
    "subFilter": [
      {
        "contentType": {
          "displayName": "Content"
        }
      }
    ],
    "displayName": "Support documents"
  }
}

console.log(transform(filter));

Maikal · Accepted Answer · 2017-03-21 20:02:19Z

0

Well, basically yes. You need to loop it throught, but as u have same code you can make a recursion, something like this:

function doit (json) {
    let ret = {};
    Object.keys(json).forEach((key) => {
        const childs = (!!json[key].subFilter) ? json[key].subFilter.map(doit) : [];
        ret          = Object.assign(ret, { [json[key].displayName]: key }, ...childs);
    });
    return ret;
}

answered Mar 21, 2017 at 20:02

Maikal

2572 silver badges11 bronze badges

Comments

Nelson Teixeira · Accepted Answer · 2017-03-21 20:15:15Z

Here is another way to do it:

var data  = {
          "Shop": {
            "subFilter": [
              {
                "taxoFeatures": {
                  "displayName": "Features"
                }
              },
              {
                "color_base": {
                  "displayName": "Colour"
                }
              }
            ],
            "displayName": "Shopping"
          },
          "Support": {
            "subFilter": [
              {
                "contentType": {
                  "displayName": "Content"
                }
              }
            ],
            "displayName": "Support documents"
          }
        };
                    
var res = {};
function search(obj){
    for(item in obj) {
    	res[obj[item].displayName] = item;
        if (obj[item].subFilter) 
            obj[item].subFilter.forEach((subitem)=>search(subitem));
    }
}

search(data);
console.log(res);

JSFiddle: https://jsfiddle.net/7b6bcjfk/

Collectives™ on Stack Overflow

Best way to parse the Json in javascript and get the key / value

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related