JavaScript：转换字符串并将其连接起来以动态创建对象属性引用

Question

I'm creating an API where values are passed by the server via data attribute, so the JS can use to retrieve information... My JS makes a AJAX call and a JSON object is returned...

{
    "data": {
        "results": {
            "type": [
                {
                    "cars" : {
                        "brands": {
                            "ford" : {},
                            "honda" : {}
                        }
                    }
                }
            ]
        }
    }
}

In order to get the brand, I just type

let brand = data.result.type[0].cars.brands.ford

this way I can get the results I need, but I need to build this path dynamically, by joining 2 partials of the path. Like I said in the beginning of the question, some info are passed via data attribute and the info is type[0].cars.brands.ford ... I need to join this to data.result in my code. I'm currently being able to get the desired result by using eval() , like so

entry.querySelectorAll('[data-brand]').forEach((e) =>
    let brand = eval('data.result.' + e.dataset.brand);
)

I know many of you will say that using eval() is bad and I'm very aware of it, but I just could not find a better way to make this to happen and there is another issue, when the brand, let's say, nissan is not on the JSON, I get an error TypeError: Cannot read property 'nissan' of undefined ... One could avoid this, by checking if the property exist, before continuing the code, but I don't know how to do this kind of test when eval() is involved.

So... basically, what I need, is a better way to dynamically build the property path, that can be tested to see if the property exist...

Thanks in advance...

Answer 1

const brand = e.dataset.brand.split(".").reduce((obj,id) => obj[id] || {}, data.results);

That doenst support brackets, so do:

type.0.whatever.keys

To return undefined for non existent keys (instead of an empty object):

const brand = e.dataset.brand.split(".").reduce((obj,id) => (obj || {} )[id], data.results);

Answer 2

You can check if data.result has the property first, and only then make your variable brand:

if(data.result.hasOwnProperty(e.dataset.brand)){
    let brand = data.result[e.dataset.brand];
}

Answer 3

You can String#match to find all keys, then iterate the keys using Array#reduce , and get the key value from the object:

 const obj = {"data":{"results":{"type":[{"cars":{"brands":{"ford":{"name":"ford"},"honda":{"name":"honda"}}}}]}}}; const brand = 'data.results.type[0].cars.brands.ford'; const getPathValue = (src, path) => path.match(/[^.\\[\\]]+/g) .reduce((p, k) => typeof p === 'object' ? p[k] : p, src); const brandOBj = getPathValue(obj, brand); console.log(brandOBj); 

Answer 4

You can check ie the lodash get method which allows you to access values of object using path.

If lodash is too big for you, just review their implementation.