Create String From JSON object KEYS - Vanilla JavaScript or lodash

Question

need some help.

I have a json object and I want to create an string array with keys of the object.

json Object

{
    "FEATURES": {
        "APP_DASHBOARD": {
            "MENU_TITLE": "Dashboard",
            "HEAD_TITLE": "Dashboard",
            "HEAD_DESC": "Welcome to briteplan"
        },
        "APP_TEAM": {
            "MENU_TITLE": "Teams",
            "HEAD_TITLE": "Teams",
            "HEAD_DESC": "",
            "TOOL_TIPS": {
                "TEAM_REFRESH": "Refresh teams",
                "TEAM_ADD": "Add new team",
                "TEAM_EDIT": "Edit team",
                "TEAM_REMOVE": "Remove team",
                "MEMBER_REMOVE" : "Remove team member",
                "MEMBER_LEAD" : "Team lead",
                "AVL_MEMBERS_REFRESH" : "Refresh available members"
            },
            "CONTENT": {
                "TEAMS_TITLE": "Teams",
                "MEMBERS_TITLE": "Members",
                "AVL_MEMBERS_TITLE": "Available team members"
            }
        }
    },
    "GENERAL": {
        "SEARCH_PLACEHOLDER": "Search ..."
    }
}

I would like to generate a array that looks like this:

var myArray = [
'FEATURES.APP_TEAM.MENU_TITLE',
'FEATURES.APP_TEAM.HEAD_TITLE',
'FEATURES.APP_TEAM.HEAD_DESC',
'FEATURES.APP_TEAM.TOOL_TIPS.TEAM_REFRESH',
'FEATURES.APP_TEAM.TOOL_TIPS.TEAM_ADD',
'FEATURES.APP_TEAM.TOOL_TIPS.TEAM_EDIT',
'FEATURES.APP_TEAM.TOOL_TIPS.TEAM_REMOVE',
];

Not all values is included, but I think you get the Idea. The main thing is I Will know the I have "FEATURES" in the object and I will know the feature name "APP_TEAM", but I don't know the nesting level within that feature.

Hope anyone can help me.

Should be pretty easy with a recursive function call on every nested object. What do you have so far? — , May 04 '16 at 18:37

score 1 · Accepted Answer · answered May 04 '16 at 19:13

recursion:

function getKeys (o) {
  var keys = [];
  for (var prop in o) {
    if(o.hasOwnProperty(prop)) {
      if(typeof o[prop] === 'object') {
        getKeys(o[prop]).forEach(function (nestedProp) {
          keys.push(prop + '.' + nestedProp);
        });
      }
      else {
        keys.push(prop);
      }
    }
  }
  return keys;
}

on the above object, returns:

[
  "FEATURES.APP_DASHBOARD.MENU_TITLE",
  "FEATURES.APP_DASHBOARD.HEAD_TITLE",
  "FEATURES.APP_DASHBOARD.HEAD_DESC",
  "FEATURES.APP_TEAM.MENU_TITLE",
  "FEATURES.APP_TEAM.HEAD_TITLE",
  "FEATURES.APP_TEAM.HEAD_DESC",
  "FEATURES.APP_TEAM.TOOL_TIPS.TEAM_REFRESH",
  "FEATURES.APP_TEAM.TOOL_TIPS.TEAM_ADD",
  "FEATURES.APP_TEAM.TOOL_TIPS.TEAM_EDIT",
  "FEATURES.APP_TEAM.TOOL_TIPS.TEAM_REMOVE",
  "FEATURES.APP_TEAM.TOOL_TIPS.MEMBER_REMOVE",
  "FEATURES.APP_TEAM.TOOL_TIPS.MEMBER_LEAD",
  "FEATURES.APP_TEAM.TOOL_TIPS.AVL_MEMBERS_REFRESH",
  "FEATURES.APP_TEAM.CONTENT.TEAMS_TITLE",
  "FEATURES.APP_TEAM.CONTENT.MEMBERS_TITLE",
  "FEATURES.APP_TEAM.CONTENT.AVL_MEMBERS_TITLE",
  "GENERAL.SEARCH_PLACEHOLDER"
]

Nicely done. Alternatively, you could use loadash for better readability & performance. — nick, May 04 '16 at 20:39

Create String From JSON object KEYS - Vanilla JavaScript or lodash

1 Answers1