-6

I'm trying to loop through this data, to give value to each.

const key = Object.keys(response.data)
key.forEach((index,element) => {
    // let query = "this."+element
    this.element = response.data.element
});

the output should be

this.name = response.data.name
this.password= response.data.password

...

Barmar
  • 741,623
  • 53
  • 500
  • 612
c j
  • 25
  • 2
  • 1
    https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback – Daniel A. White Aug 20 '19 at 15:33
  • 1
    @DanielA.White The code uses an arrow function, that should access the correct `this`. – Barmar Aug 20 '19 at 15:38
  • Array functions can also take a second parameter after the callback to be bound to `this`. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Syntax One caveat though is you can only use real functions and not lambda functions to properly get `this` bound. – Drew Reese Aug 20 '19 at 15:40
  • @DrewReese Not needed with an arrow function. – Barmar Aug 20 '19 at 15:40
  • It's not needed normally, agreed, but in the context of an array function callback, it won't work. Try it. – Drew Reese Aug 20 '19 at 15:45
  • @DrewReese It would be if you used an old-style function, but arrow functions inherit the caller's `this`. See the working example in my answer. – Barmar Aug 20 '19 at 15:51
  • @Barmar, yes, that works because it is inheriting the `this` from the `MyClass` enclosure you created. OP's question didn't specify what the parent was, so in isolation the `this` in their snippet is unclear. My point was that within this isolation you can pass a reference to an object you want to be the `this` within the callback if you don't want it to inherit the caller's `this`. It is right in the docs I linked. Think utility function versus anonymous callback. – Drew Reese Aug 20 '19 at 16:10
  • @DrewReese It wasn't clear that you were talking about passing something *other* than the caller's `this` object. – Barmar Aug 20 '19 at 16:12
  • The question is clear that he wants to set properties of the caller's `this` -- see the desired result at the end. – Barmar Aug 20 '19 at 16:12
  • @Barmar I didn't say anything about the caller's `this`, or any specific `this` at all, just that the array::forEach API allows a second parameter to be passed *as* `this` for use in the callback, with link to source. Agree to disagree I suppose, but the OP's `this` could literally be anything, doesn't have to just be the caller, and it was clear to me OP was asking how to assign/access `this` in the callback. – Drew Reese Aug 20 '19 at 16:26

1 Answers1

3

You have several problems with your code, neither of which has to do with accessing this.

First, you have ths arguments in the wrong order in the callback. The first argument is the element, the second is the index (maybe you're used to jQuery -- it uses the opposite order in its .each() and .map() methods).

Second, you're not using the element properly. .element means to access the property literally named element, it doesn't use the value of the variable element. You have to use [element] to access a property dynamically; see Dynamically access object property using variable

const key = Object.keys(response.data)
key.forEach((element) => {
    this[element] = response.data[element]
});

class MyClass {
  copyProps(response) {
    const key = Object.keys(response.data)
    key.forEach((element) => {
      this[element] = response.data[element]
    });
  }
}

obj = new MyClass;
obj.copyProps({
  data: {
    name: "MyName",
    age: 10
  }
});
console.log(obj);

You could also use Object.assign() to copy properties:

Object.assign(this, response.data);
Barmar
  • 741,623
  • 53
  • 500
  • 612