在打字稿中将字符串转换为对象键查找

Question

I have a use case where I need to use a string to match object values

For example

'one': {
    'two': {
            'three': 'val'
        }
    }
}

split and reduce seems to be the way to go about this, but I have not gotten it to work using the code below

const string = 'one.two.three';
const test = string
             .split('.')
             .reduce((obj, key) => {
                 return obj[key]
             });
console.log(test); 
//expected one['two']['three'] 

[ Edit to add more context ] I have an HTML Template (angular 7) that calls the sort function

(click)="sortColumn('spn.subscriptionId')"

I have the following object to keep track of sort order for each column

public sortableColumns = [
    { colName: 'name', colSortDir: 'none'},
    { colName: 'spn.subId', colSortDir: 'none'},
    { colName: 'regionName', colSortDir: 'none'},
    { colName: 'customerName', colSortDir: 'none'}
];

and the sortColumn function. this.subscriptions comes from a rest api. the sort function works if there is a rest api object only has one level - 'name' but does not work for the nested object - spn.subscriptionId

public sortColumn(column : string) {
    // resets other columns 
    this.sortableColumns.forEach((el) => {
        if (el.colName !== column) {
            el.colSortDir = 'none';
        }
    });

    // matches the column name passed with sortableColumns to set order in UI
    const col = this.sortableColumns.filter((el) => {
        return el.colName === column;
    });

    // sorting of the array object. this.subscriptions comes fr
    if (col[0].colSortDir === 'asc') {
        col[0].colSortDir = 'dsc';
        this.subscriptions.sort((val1, val2) => {
            if (val1[column] < val2[column]) {
                return -1;
            } else if (val1[column] > val2[column]) {
                return 1;
            } else {
                return 0;
            }
        });
    } else if (col[0].colSortDir === 'none' || col[0].colSortDir === 'dsc') {
        col[0].colSortDir = 'asc';
        this.subscriptions.sort((val1, val2) => {
            if (val1[column] > val2[column]) {
                return -1;
            } else if (val1[column] < val2[column]) {
                return 1;
            } else {
                return 0;
            }
        });
    }
}

Answer 1

There is no magic "lookup key" that you can plug in to the bracket notation obj[key] and have it traverse multiple nested objects.

Given your expected use case, it makes the most sense to have a lookup function that takes a compound key and uses your .split().reduce() method to fetch the desired value in the nested objects.

So, something like this:

function lookup(obj : object, key : string) : any {
    return key.split('.').reduce((o, k) => o && o[k], obj);
}

Used like this:

    this.subscriptions.sort((val1, val2) => {
        return lookup(val1,column) - lookup(val2,column);
    });

Answer 2

It looks like your problem was not passing the actual object in as the initialValue parameter .

We can write a nestedProp() function which takes an object and a path string and walks through it:

function nestedProp(obj: object, path: string): unknown {
    return path.split(".").reduce((o, k) => o ? (o as any)[k] : undefined, obj);
}

All I've really done is add obj as initialValue . I also guard against o[k] being null or undefined so that the code doesn't throw runtime errors if you pass a bad string.

Also note that the type definitions I've given are really very loose; obj is any object , path is any string , and it returns unknown . That's because TypeScript can't do string manipulation at the type level, so it has no idea that "one.two.three".split(".") will result in ["one", "two", "three"] and therefore no idea that nestedProp() should produce a string instead of an undefined which is what happens when you pass in, say, "oops.not.a.property" . It's possible to tighten the definitions up a little, but it doesn't seem worth it. To be safe you should test that the output is what you want.

---

So, let's test it. Say your object is this:

const myObj = {
    'one': {
        'two': {
            'three': 'val'
        }
    }
}

Then you can call nestedProp() like this:

const res1 = nestedProp(myObj, "one.two.three");
console.log(res1); // "val"
console.log((typeof res1 === "string" ? res1 : "oops").toUpperCase()); // VAL

const res2 = nestedProp(myObj, "three.two.one");
console.log(res2); // undefined
console.log((typeof res2 === "string" ? res2 : "oops").toUpperCase()); // OOPS

Looks good to me. Note that I'm testing if the output is a string before assuming it is one, and using "oops" in the case that it isn't. Okay, hope that helps; good luck!

Playground link to code

Answer 3

let string = "one.two.three.four.five.six";

let stringArr = string.split('.');
let obj = {
  [stringArr[stringArr.length - 1]]: "value",
}
for (let i = stringArr.length - 2; i >= 0; i--) {
  this[stringArr[i]] = obj
  obj = Object.assign({}, this)
  delete this[stringArr[i]]
}
console.log(JSON.stringify(obj))

This works for any number of nesting.

{"one":{"two":{"three":{"four":{"five":{"six":"value"}}}}}}

I hope this is what you want