create key to access item in object with javascript

Question

I have the below object where I want to get the name of the first item in the staff array.

const staffObj = {
  "staff":[
    { "name": "tom"},
    { "name": "sam"}
  ]
}

I can do this by doing either

console.log(staffObj['staff'][0]['name'])
console.log(staffObj.staff[0].name)

But what I want to do is is access my object from a variable I create eg

const currentField = 'name'    
const firstITem = ['staff'][currentField ]
console.log(firstITem,staffObj.firstITem)

What is the correct syntax to achieve this?

Answer 1

You can't put bits of Javascript source code in a variable like that. You need variables for each part:

const currentType = 'staff';
const currentField = 'name';
console.log(staffObj[currentType][0][currentField]);

Answer 2

You missing [0] in your code. You should use a function for such things. Example:

function firstFtaffField(staffObj, field) {
  return staffObj['staff'][0][field];
}

// Usage
var name = firstFtaffField(staffObj, 'name');

Answer 3

You can do this if you want to use currentField as a variable. Notice how firstITem[currentField] has currentField which is not in quotes. It is a variable and evaluated by javascript and then applied as property name.

const staffObj = {
  "staff":[
    { "name": "tom"},
    { "name": "sam"}
  ]
};

console.log(staffObj['staff'][0]['name']);
console.log(staffObj.staff[0].name)

const currentField = 'name';   
const firstITem = staffObj.staff[0];
console.log(firstITem[currentField]);

Answer 4

That is not possible, but you could do something similar by defining firstItem as a function:

const staffObj = {
  "staff":[
    { "name": "tom"},
    { "name": "sam"}
  ]
};

const currentField = 'name';
const firstItem = x => x['staff'][0][currentField];
console.log(firstItem(staffObj))

Answer 5

You look like you might want something like function!

As a quick note since you seem to be a beginner: Arrow Functions

var get = n => c => c[n]; // function given a nest returns a function given a container returns the nest inside the container
var obj = {
  staff:[
    { name: 'tom' },
    { name: 'sam' }
  ]
};

var getFirst = get(0);
var getStaff = get('staff');

console.log(getFirst(getStaff(obj))); // { name: 'tom }

Of course this is functional programming that relys on composition, so if that doesn't make too much send to you you can instead go with a more familiar imperative version:

var obj = { staff: [ {name:'tom'}, {name:'sam'}]};
var getStaff = obj => obj['staff'];
var getFirst = ary => ary[0];

var staff = getStaff(obj);
var firstStaff = getFirst(staff);

// alternate
//var getFirstStaff = obj => getFirst(getStaff(obj));

console.log(firstStaff);

As you can see there are some similarities between the two, but composition is done in a reversed order with some more advanced techniques(composition, currying). Since you seem to be new to JS I'd suggest doing it the second way so it makes more sense until you understand the first way(which will make thinking in promises a LOT easier)

Answer 6

In JavaScript the someObject.someProperty notation is a shorthand for someObject['someProperty'].

Which means that if you want to have a dynamically calculated property name, you can't use a 'dot' notation, because someObject.someProperty will always be interpreted as someObject['someProperty'] regardless of the fact that someProperty is maybe a valid variable which holds some value of string type.

Also, if you try to use something like someObject."someProperty" you will get Uncaught SyntaxError: Unexpected string, because that isn't a valid JS syntax.

Answer 7

There is no such syntax. The only way you could do it using eval:

const staffObj = {
  "staff":[
    { "name": "tom"},
    { "name": "sam"}
  ]
};
const currentField = 'name';
const firstItem = ".staff[0]." + currentField;
console.log(eval("staffObj" + firstItem));

If currentField is actually variable, then you will have to change firstItem as well every time you change the currentField.