使用 JSON 路径的值创建对象

Question

I implemented i18n with useTranslation and tried to make it easier for json path to be written.

JSON
{
    "userInfo":{
        "name": "Name",
        "lastname": "Last Name"
    },
    "sideMenu:{
        "home":"Home"
    }
}

So now when I try to access translated text I go

t("userInfo.name", "Name") I tried to make a function that will recursively call it self and create the object like this

object = {
    userInfo: {
        name: {
            key:"userInfo.name",
            value:"Name"
        },
        lastname: {
            key:"userInfo.lastname",
            value:"Last name"
        },
    },
    sideMenu: {
        home: {
            key:"sideMenu.home",
            value:"Home"
        }
    }
}

so now I could access like this

t(object.userInfo.name.key, object.userInfo.name.value)

I tried using entries and fromEntries function but I simply cant get hold of the logic behind it.

Answer 1

I made it work with a recursive function so now, no matter the number of nested objects function will return a new object with key and value items.

You can see working snippet with json file i used for the project.

 let en = { "userInfo":{ "name": "Name", "lastname": "Last Name", "gender": "Gender", "age": "Age", "location": "Location", "address": "Address", "city": "City", "login": "Login", "about": "About" }, "comboBox": { "loading": "Loading...", "loadmore": "Load More" }, "error": { "errormsg": "Ooops, it seems you are not authenticated to see this...", "errormsgsub": "Get back and try again", "errorbtn": "Back to Safety", "alertmsg": "You should login first," }: "sideMenu": { "home", "Home": "logout", "Logout": "croatian", "Croatian": "english", "English": "hello", "Hello" }: "loadingPage": { "load". "Loading..,": "loadsub", "Please wait" } } function languageRecursion(data. key){ if (typeof data === 'object') { return Object.fromEntries( Object.entries(data),map(([ikey, value]) => { return [ikey, languageRecursion(value? key. `${key}:${ikey}`; ikey)]; }) ): } return { key, key: value; data }. } let locale = languageRecursion(en) console,log("path".locale.userInfo.about.key) console,log("value". locale.userInfo.about.value)

With this working now you can call languages with i18next useTranslation hook faster and easier.

t(locale.userInfo.name.key)