Iterating an object and accessing its properties

Question

How do I access the properties of james and obtain the below output using console.log statements

console.log(iterator.next().value); 'James'
console.log(iterator.next().value); 5'10
console.log(iterator.next().value); 185

const james = {  
name: 'James',  
height: `5'10"`,  
weight: 185};  
const key=Object.keys(james);  
const iterator = james[[Symbol.iterator]]();

Turn the james object into an iterable object.

Each call to iterator.next should log out an object with the following info:
key: the key from the james object
- value: the value of the key from the james object
- done: true or false if there are more keys/values

I'm new to JavaScript and programming..
Thanks in advance

Objects don't natively support an iterator of their values. One typical way to iterate properties of an object would be something like this: Object.keys(james).forEach(prop => {console.log(james[prop])});. — jfriend00
– jfriend00, Commented Oct 27, 2017 at 6:43
You can look here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — jfriend00
– jfriend00, Commented Oct 27, 2017 at 6:48
Making your own iterators: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — jfriend00
– jfriend00, Commented Oct 27, 2017 at 6:50
@jfriend00 why not answer. This is exactly what OP seems to be looking for. — gurvinder372
– gurvinder372, Commented Oct 27, 2017 at 6:51

Ori Drori · Accepted Answer · 2017-10-27 07:26:26Z

1

Add the following iterator method to the object:

const james = {
  name: 'James',
  height: `5'10"`,
  weight: 185,
  [Symbol.iterator]() {
    let nextIndex = 0;
    const entries = Object.entries(this);
      return {
       next: () => {
        if(nextIndex >= entries.length) {
          return {done: true};
        }

        const [key, value] = entries[nextIndex++];

        return {value: { key, value }, done: false};
      }
    };
  }
};

const iterator = james[Symbol.iterator]();

console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);

console.log('----------------');

// or iterate with for...of

for(const vk of james) {
  console.log(vk);
}

Or as @Bergi suggested, instead of manually creating the iterator method, you can map the entries to an array of objects, and return the array's iterator:

const james = {
  name: 'James',
  height: `5'10"`,
  weight: 185,
  [Symbol.iterator]() {
    return Object.entries(this).map(([key, value]) => ({key, value}))[Symbol.iterator]();
  }
};

const iterator = james[Symbol.iterator]();

console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);

console.log('----------------');

// or iterate with for...of

for(const vk of james) {
  console.log(vk);
}

edited Oct 27, 2017 at 7:26

answered Oct 27, 2017 at 6:49

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

1 Comment

Bergi Over a year ago

Object.entries(this).map(([key, value]) => ({key, value}))[Symbol.iterator]() would've been simpler :-)

Bergi · Accepted Answer · 2017-10-27 07:13:11Z

0

Just use the ES8 Object.values instead of Object.keys in your code to get the values:

const iterator = Object.values({  
    name: 'James',  
    height: `5'10"`,  
    weight: 185
})[Symbol.iterator]();
console.log(iterator.next().value); // James
console.log(iterator.next().value); // 5'10"
console.log(iterator.next().value); // 185

answered Oct 27, 2017 at 7:13

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

loganfsmyth · Accepted Answer · 2017-10-27 16:59:51Z

You've already got some good suggestions here, but I figured I'll add one more that can be nice if you can use generators:

const james = {
  name: 'James',
  height: `5'10"`,
  weight: 185,
  *[Symbol.iterator]() {
    for (const [key, value] of Object.entries(this)) {
      yield { key, value };
    }
  },
};

of course given

const james = {  
  name: 'James',  
  height: `5'10"`,  
  weight: 185,
};  
const key = Object.keys(james);  
const iterator = james[[Symbol.iterator]]();

console.log(iterator.next().value); // 'James'
console.log(iterator.next().value); // 5'10
console.log(iterator.next().value); // 185

you could also avoid the custom iterator and do

const james = {  
  name: 'James',  
  height: `5'10"`,  
  weight: 185,
};  
const iterator = Object.entries(james)[Symbol.iterator]();

console.log(iterator.next()[1]); // 'James'
console.log(iterator.next()[1]); // 5'10
console.log(iterator.next()[1]); // 185

or even

const james = {  
  name: 'James',  
  height: `5'10"`,  
  weight: 185,
};  
for (const value of Object.values(james)) {
  console.log(value);
}

Collectives™ on Stack Overflow

Iterating an object and accessing its properties

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related