Javascript: accessing a value of a key:value pair within an object

Web Development Full-Stack
1

I want to access the value of a key:value set within an object via a function. My understanding is that I can use a dot operator to do this. I begin with a simple for loop to console log the set:

const groceries = arr => {
for (let i=0; i<arr.length; i++){
console.log(arr[i]);
}
}

let groceryItems = [{item: ‘Carrots’}, {item: ‘Hummus’}, {item: ‘Pesto’}, {item: ‘Rigatoni’}];

groceries(groceryItems);
//PRINTS:
{ item: ‘Carrots’ }
{ item: ‘Hummus’ }
{ item: ‘Pesto’ }
{ item: ‘Rigatoni’ }

But I only want to access the values (Carrots, Hummus, Pesto, Rigatoni).

My thinking is that I use the dot operator to access these within my function:
const groceries = arr => {
for (let i=0; i<arr.length; i++){
console.log(arr.item[i]);
}
}

This throws up a typeError: Cannot read property ‘0’ of undefined
at groceries.

Can someone explain to me what I’m doing wrong?
Or how I can access the values in this object and print them to the console
Many thanks
S

2

To preserve code formatting in forum posts, see: How do I format code in my posts?

// You wrote:
const groceries = arr => {
    for (let i=0; i<arr.length; i++) {
        console.log(arr.item[i]);
    }
}

// Change it to:
const groceries = arr => {
    for (let i=0; i<arr.length; i++) {
        console.log(arr[i].item);
    }
}

arr is an array of objects. arr doesn’t have an item property. Hence the typeError.

arr[i] will target an object within the array. This object does have a key named item that can be accessed via the statement    arr[i].item

Alternatively, a one-line solution can also be:

groceryItems.forEach(obj => console.log(obj.item));

where obj is just a name I picked. You can pick a different name that you find more readable and appropriate.

Documentation for forEach: Array.prototype.forEach() - JavaScript | MDN

3

Brilliant! thank you!

1 Like
4

Leading on from this…

I’m trying to end up with the following string:
‘Carrots, Hummus, Pesto and Rigatoni’

My logic is to take the first three words from the array and add them to a newArray and then add ‘Rigatoni’ to a lastWord array. I will then add these two arrays together using string concatenation. Starting with this:

const groceries = arr => {
let newArray = ;
let lastWord = ;

for (let i=0; i<arr.length; i++) {
  if (arr[i] !== 'Rigatoni'){
    newArray.push(arr[i].item)
  } else if (arr[i] === 'Rigatoni')
    lastWord.push(arr[i].item)
  
  //newArray.join(' ');
    console.log(newArray); console.log(lastWord);
}

}

let groceryList = [{item: ‘Carrots’}, {item: ‘Hummus’}, {item: ‘Pesto’}, {item: ‘Rigatoni’}];

groceries(groceryList);
/*PRINTS:
[ ‘Carrots’ ]

[ ‘Carrots’, ‘Hummus’ ]

[ ‘Carrots’, ‘Hummus’, ‘Pesto’ ]

[ ‘Carrots’, ‘Hummus’, ‘Pesto’, ‘Rigatoni’ ]

This is obv not the result I’m looking for and I haven’t employed the string concatenation yet, but I wanted to see if the .push method was working to create the newArray and lastWord arrays. Perhaps I don’t need the for loop?

5

In your conditions, you are comparing an object to a string (this will obviously always result in false).
Instead, you want to make comparison between strings.

In other words, instead of comparing {item: 'Rigatoni'} to the string 'Rigatoni', you want to compare 'Rigatoni' with 'Rigatoni'

// You wrote:
if (arr[i] !== 'Rigatoni'){
// and
} else if (arr[i] === 'Rigatoni')

// CHANGE TO:

if (arr[i].item !== 'Rigatoni'){
// and
} else if (arr[i].item === 'Rigatoni')

With the above, your output will be:

console.log(newArray)
// [ 'Carrots', 'Hummus', 'Pesto' ]

console.log(lastWord);
// [ 'Rigatoni' ]

You can then experiment with and develop your strategy of using string concatenation to end up with your desired string of

'Carrots, Hummus, Pesto and Rigatoni'

Once you have accomplished the above, you may want to think about your logic and how can you abstract or generalize your approach.

Your proposed approach will work if you knew beforehand that the data structure is
[{item: 'Carrots'}, {item: 'Hummus'}, {item: 'Pesto'}, {item: 'Rigatoni'}];
and that the last grocery is 'Rigatoni'

But suppose, the groceries were:
[{item: 'Carrots'}, {item: 'Hummus'}, {item: 'Rigatoni'}, {item: 'Pesto'}];

Now 'Rigatoni' is not the last grocery and you will have to edit your conditions manually to

if (arr[i] !== 'Pesto'){

Or, suppose there was no 'Rigatoni' in the groceries at all,

[{item: 'Carrots'}, {item: 'Hummus'}, {item: 'Pesto'}, {item: 'Peas'}];

Farther down the road, you may want to think about how you can generalize your code so that you don’t have to hard-code the last grocery.

1 Like