Single variable to stand in for multiple key names - javascript

Question

I have an array, something like this:

array =     
    [
        {
            "type": "apple",
            "color": "red",
            "id": "redApple"
        },
        {
            "type": "grape",
            "color": "green",
            "id": "greenGrape",
            "options": [
                {
                    "bunchName": "bunch1",
                    "size": "8"
                },
                {
                    "bunchName": "bunch2",
                    "size": "10"
                },
                {
                    "bunchName": "bunch3",
                    "size": "5"
                }
            ]
        }
    ]

I have a function that searches for values in the array.

function findValue (index, key) {
    return array[index][key];
}

var value = findValue(0, "id");
// returns redApple

Is there a way I could pass a single argument to the function if I wanted to find something deeper in the array? For example, if I wanted to find "bunchName" could I pass it something like 1, "options[0].bunchName" and get back "bunch1"?

I want a function that can handle multiple keys. In my real project sometimes I'm looking for something on the first level, sometimes I'm looking on the second level, sometimes the third level, etc.

jQuery can be used if for some reason that would help.

please specify the wanted result by taking a path to an object with an array with objects. — Nina Scholz
– Nina Scholz, Commented Oct 29, 2017 at 16:16
please add the result if taken 'options.bunchName' as parameter for the function. — Nina Scholz
– Nina Scholz, Commented Oct 29, 2017 at 16:27
Some libraries like Lodash can be used lodash.com/docs/4.17.4#get. Otherwise, it can be done in JavaScript with recursion, loop, or maybe eval — Slai
– Slai, Commented Oct 29, 2017 at 16:30

Nina Scholz · Accepted Answer · 2017-10-29 17:04:17Z

3

You could take the string, replace the brackets, split the string and reduce the path for the result. The function uses a default object for missing or not given properties.

function getValue(object, path) {
    return path
        .replace(/\[/g, '.')
        .replace(/\]/g, '')
        .split('.')
        .reduce(function (o, k) { return (o || {})[k]; }, object);
}

function findValue(index, path) {
    return getValue(array[index], path);
}

var array = [{ type: "apple", color: "red", id: "redApple" }, { type: "grape", color: "green", id: "greenGrape", options: [{ bunchName: "bunch1", size: "8" }, { bunchName: "bunch2", size: "10" }, { bunchName: "bunch3", size: "5" }] }];
        
console.log(findValue(1, "options[0].bunchName"));

edited Oct 29, 2017 at 17:04

answered Oct 29, 2017 at 16:57

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

glass duo Over a year ago

This was a good answer. The only issue I had with it was that I do not want to use .reduce because of compatibility issues with older versions of IE. But I was able to use this with a work around for the reduce portion of the code. Thanks.

Shishir Arora · Accepted Answer · 2017-10-29 16:28:40Z

From what I understand, output of findValue(object, "bunchName"); should be "bunch3", where object is array in OP's example.

var object =
    [
        {
            "type": "apple",
            "color": "red",
            "id": "redApple"
        },
        {
            "type": "grape",
            "color": "green",
            "id": "greenGrape",
            "options": [
                {
                    "bunchName": "bunch1",
                    "size": "8"
                },
                {
                    "bunchName": "bunch2",
                    "size": "10"
                },
                {
                    "bunchName": "bunch3",
                    "size": "5"
                }
            ]
        }
    ]

var findValue = (object, key) => {
    var resultValue;
    var rec = (currentObj) => {
        if(currentObj && typeof currentObj === "object"){
            for(let curKey in currentObj){
                if (curKey === key){
                    resultValue = currentObj[curKey];
                }else{
                    rec(currentObj[curKey]);
                }
            }
        }

    }
    rec(object);
    return resultValue;
}
console.log(findValue(object, "bunchName"));

fiskeben · Accepted Answer · 2017-10-29 16:29:13Z

0

You could add a function that takes an object and a key and returns object[key] and then split your key string into a list of individual keys by the dot. Then you could traverse the list of keys and use the function to get the value for each level in your object:

Totally untested code I just whipped up:

function valueByKey(obj, key) {
  if (obj) {
    return obj[key];
  }
}

function findValue(index, key) {
  const keys = key.split('.');
  let value = array[index];
  for (let i = 0; i < keys.length; i++) {
    value = valueByKey(value, keys[i]);
  }
  return value;
}

answered Oct 29, 2017 at 16:29

fiskeben

3,4925 gold badges33 silver badges35 bronze badges

Comments

Ivan Kalita · Accepted Answer · 2017-10-29 16:31:37Z

0

Non-recurrent solution:

var array = [
    {
        'a': {
            'b': 1
        }
    }
];

function findValue(index, key) {
    var keys = key.split('.');
    var tmp = array[index];
    for (var i = 0; i < keys.length; i++) {
        if (!tmp.hasOwnProperty(keys[i]) || typeof tmp !== 'object') {
            // throw an exception, or return default value – property not found.
        }
        tmp = tmp[keys[i]];
    }

    return tmp;
}

findValue(0, 'a.b');

answered Oct 29, 2017 at 16:31

Ivan Kalita

2,3171 gold badge21 silver badges31 bronze badges

Collectives™ on Stack Overflow

Single variable to stand in for multiple key names - javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related