如何动态获取嵌套在 JSON 文件中的数据

Question

I am building a feature that can allow users to type a word, select the language the word is in and then get the word's definition and an example using this API service .

The data I want to fetch is whatever it is at position 0 of "exclamation" of "meaning". This way, I can make sure users get the definition and an example for the word they are looking for. My question is, the position of data of "definition" and "example" varies with different languages. As you can see, the one below is the English word's JSON data format.

[{
    "word": "hello",
    "phonetic": [
        "həˈləʊ",
        "hɛˈləʊ"
    ],
    "meaning": {
        "exclamation": [
            {
                "definition": "used as a greeting or to begin a telephone conversation.",
                "example": "hello there, Katie!"
            }
        ]
    }
}]

And this one below is the French word's JSON data format.

[
    {
        "word": "bonjour",
        "phonetic": "",
        "origin": "",
        "meaning": {
            "nom masculin": {
                "definitions": [
                    {
                        "definition": "Souhait de bonne journée (adressé en arrivant, en rencontrant).",
                        "example": "",
                        "synonyms": [
                            "salut"
                        ]
                    }
                ]
            }
        }
    }
]

Currently, I am storing each data's position in a variable and doing this repeatedly until I get to the position of the ultimate data I am trying to fetch like below.

const firstData = data[0];
const firstDataKeys = Object.keys(firstData);
const meaningsIndex = firstDataKeys.indexOf("meaning");
const meaningsData = firstData[firstDataKeys[meaningsIndex]]
const meaningsKeys = Object.keys(meaningsData);

I would like to know if there is any other way to dynamically fetch data when the desired data's position vary with each request.

Answer 1

You can use something like a "deep-picker" function, since the structure of the response object can change. See this comment for a clean function that would let you select the property 'definition' for example.

https://stackoverflow.com/a/15643382/3347968

Ex.

const res = findNested(myResponseObj, 'definition');

Would result in something like this

res = ["Souhait de bonne journée (adressé en arrivan.."].

Answer 2

Javascript lets you directly parse javascript into objects with JSON.parse

So you can do something like.

const word = "exclamation"
const dict = JSON.parse(json);

//These 2 syntaxes are equivalent
const definition1 = dict["meaning"][word]["definitions"][0];
const definition2 = dict.meaning[word].definitions[0];

if you don't know if the word exists you can do something like

const word = "exclamation"
const dict = JSON.parse(json);

//These 2 syntaxes are equivalent
const wordInfo = dict.meaning[word];
if(wordInfo)
{
   //you can do something more exotic, but this will only call code if the
   //word exists. 
   for(var i = 0;i < wordInfo.definitions.length;i++)
   {
     console.log(wordInfo.definitions[0])
   }
}