3

I am trying to copy a property in angular (volunteership to x) because I want to edit the property and leave volunteership the way it is. Here is the code from ts:

volunteership;
x ;

constructor(private viewvolunteershipService: Volunteership,
    private router: Router) {}

ngOnInit() {
    this.viewvolunteershipService.getVolunteership().subscribe(volunteership =>
        this.volunteership = volunteership);
    console.log("Volunteership", this.volunteership);
            this.x = this.volunteership;
}

Here, in HTML I want to call the property x on a ngFor so I can choose a city from it, but it shows me nothing. If I use volunteership instead of x it's working perfectly. How can I copy volunteership to x so I could choose a city from it?

<div class="form-group" >
    <label for="city" >City</label>
        <select id="city"   class="form-group" >
            <option  value=""></option>
            <option *ngFor=" let z of x"  >{{z.city}}</option>

        </select>
    </div>

I've already tried to copy as an array

 for (var i = 0, len = this.volunteership.length; i < len; i++) {
    this.x[i] = this.volunteerhip[i];
}

I've even tried using Object.assign() method and still nothing.

mxmissile
  • 11,464
  • 3
  • 53
  • 79
M. Niculescu
  • 165
  • 1
  • 2
  • 6
  • `subscribe` is asynchronous, meaning that the code outside of the `subscribe` won't stop executing while you are calling your service. If you want to use the data you set to your `volunteership`, you need to do it inside of the subscribe or in a way that will guarantee your service has already fetched the data (e.g. calling a `change` event on a dropdown that is shown using `*ngIf="volunteership"`) – snaplemouton Jul 18 '17 at 15:48

1 Answers1

1

First of all you need to do the assignment in the callback (subscribe) as per explained here: How do I return the response from an Observable/http/async call in angular2? but you mention that you only want the changes to reflect in the x array. As is, all changes will happen to both arrays, as x has a reference to volunteership, what you'd probably want to use Object.assign:

ngOnInit() {
  this.viewvolunteershipService.getVolunteership().subscribe(volunteership => {
    this.volunteership = volunteership;
    this.x = this.volunteership.map(obj => Object.assign({}, obj))
  });
}

now x array will not have a reference to the volunteership array.

AT82
  • 71,416
  • 24
  • 140
  • 167
  • Thanks, it actually worked! The changes I want to make to x still need to be in the subscribe, right? – M. Niculescu Jul 18 '17 at 15:52
  • Yes, if you need to do it changes after retrieving the data, you need to do it inside `subscribe` :) – AT82 Jul 18 '17 at 15:54
  • Do you also know how can I save volunteership.city in another object? – M. Niculescu Jul 19 '17 at 09:11
  • What do you mean by *another object*. `volunteership` is an array, so that's why I'm having trouble understanding :) How would the expected result look like? – AT82 Jul 19 '17 at 09:12
  • Volunteership is an array that contains more properties. One of them is city. I want to copy the city from all the volunteerships in another array. I will check that array and if there are duplicates I want to delete them and then show in the option in HTML the cities with no duplicates. Do you know how can I copy in a string the cities from all the volunteerships? – M. Niculescu Jul 19 '17 at 09:29
  • 1
    So you want the new array to be an array of strings? Then you can use the `map` for that too: `let cityArray = this.volunteership.map(x => x.city)` – AT82 Jul 19 '17 at 09:47
  • 1
    I was trying something like let city = this.volunteership.city.map(obj => Object.assign({}, obj)) and it didn't work. Now it works with what you showed me. Thank you very much! – M. Niculescu Jul 19 '17 at 10:03
  • You are very welcome! Have a nice day and happy coding! :) – AT82 Jul 19 '17 at 10:05