1
\$\begingroup\$

I have some selects on my html page that I want to populate with the response from my backend api.

The response looks like this

JSON response

[
    {
        "_id": "5cb0673115b6d70016d293e5",
        "delivery_mode": [
            {
                "_id": "5cb0673115b6d70016d293e7",
                "name": "Delivery this"
            },
            {
                "_id": "5cb0673115b6d70016d293e6",
                "name": "Delivery that"
            }
        ],
        "interaction": [
            {
                "_id": "5cb0673115b6d70016d293e9",
                "name": "Interaction now"
            },
            {
                "_id": "5cb0673115b6d70016d293e8",
                "name": "Interaction later"
            }
        ],
        "resolution_scope": [
            {
                "_id": "5cb0673115b6d70016d293eb",
                "name": "Scope1"
            },
            {
                "_id": "5cb0673115b6d70016d293ea",
                "name": "Scope2"
            }
        ],
        "behaviour": [
            {
                "_id": "5cb0673115b6d70016d293ed",
                "category": "Remember",
                "verb": "aaaaa"
            },
            {
                "_id": "5cb0673115b6d70016d293ec",
                "category": "Analise",
                "verb": "bbbbb"
            }
        ],
        "affective_objectives": [
            {
                "_id": "5cb0673115b6d70016d293ef",
                "category": "Internalizing Values",
                "verb": "aaaa"
            },
            {
                "_id": "5cb0673115b6d70016d293ee",
                "category": "Responding to Phenomena",
                "verb": "ccccc"
            }
        ],
        "social_objectives": [
            {
                "_id": "5cb0673115b6d70016d293f1",
                "name": "Social111"
            },
            {
                "_id": "5cb0673115b6d70016d293f0",
                "name": "Social2222"
            }
        ],
        "task_types": [
            {
                "_id": "5cb0673115b6d70016d293f3",
                "category": "cat1",
                "verb": "verb1"
            },
            {
                "_id": "5cb0673115b6d70016d293f2",
                "category": "cat2",
                "verb": "verb2"
            }
        ],
        "psychologist": "5c94ffc82a6ff3368c31829e",
        "__v": 0
    },
    {
        "_id": "5cb1e4e1c746d70016f8a26d",
        "delivery_mode": [
            {
                "_id": "5cb1e4e1c746d70016f8a26f",
                "name": "test1"
            },
            {
                "_id": "5cb1e4e1c746d70016f8a26e",
                "name": "test2"
            }
        ],
        "interaction": [
            {
                "_id": "5cb1e4e1c746d70016f8a271",
                "name": "test1"
            },
            {
                "_id": "5cb1e4e1c746d70016f8a270",
                "name": "test2"
            }
        ],
        "resolution_scope": [
            {
                "_id": "5cb1e4e1c746d70016f8a273",
                "name": "reso1"
            },
            {
                "_id": "5cb1e4e1c746d70016f8a272",
                "name": "scope1"
            }
        ],
        "behaviour": [
            {
                "_id": "5cb1e4e1c746d70016f8a276",
                "category": "Analise",
                "verb": "aaaa"
            },
            {
                "_id": "5cb1e4e1c746d70016f8a275",
                "category": "Apply",
                "verb": "fdsfsdf"
            },
            {
                "_id": "5cb1e4e1c746d70016f8a274",
                "category": "Analise",
                "verb": "asdasd"
            }
        ],
        "affective_objectives": [
            {
                "_id": "5cb1e4e1c746d70016f8a278",
                "category": "Organization",
                "verb": "dfgdfg"
            },
            {
                "_id": "5cb1e4e1c746d70016f8a277",
                "category": "Responding to Phenomena",
                "verb": "dfgdfg"
            }
        ],
        "social_objectives": [
            {
                "_id": "5cb1e4e1c746d70016f8a27a",
                "name": "socialtest1"
            },
            {
                "_id": "5cb1e4e1c746d70016f8a279",
                "name": "socialtest2"
            }
        ],
        "task_types": [
            {
                "_id": "5cb1e4e1c746d70016f8a27b",
                "category": "cattest1",
                "verb": "verbtest1"
            }
        ],
        "psychologist": "5c94ffc82a6ff3368c31829e",
        "__v": 0
    }
]

To get the name fields from every delivery_mode, interaction and resolution_scope and get those on an array that I can iterate over on the select options I've done this

ts

  getAttributes() {
    this.loading = true;
    this.http.get<Attributes[]>('attributes')
    .subscribe(
      response => {

        this.delivery_modes = response.map(response => response['delivery_mode'].map(dm => dm.name));
        this.delivery_modes = [].concat.apply([], this.delivery_modes);

        this.interactions   = response.map(response => response['interaction'].map(dm => dm.name));
        this.interactions   = [].concat.apply([], this.interactions);

        this.reso_scopes    = response.map(response => response['resolution_scope'].map(dm => dm.name));
        this.reso_scopes    = [].concat.apply([], this.reso_scopes);

        this.loading = false;

      },
      err => {
        this.toastr.error(err.error.message, 'Error');
        this.loading = false;
      }
    );
  }

html

<select #delivery_mode="ngModel" class="form-control" name="delivery_mode" [(ngModel)]="form.activity.delivery_mode" required [ngClass]="{'is-invalid': isInvalid(delivery_mode)}">
 <option *ngFor="let item of delivery_modes" [ngValue]="item">{{item}}</option>
</select>

Is the mapping supposed to be done this way?

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.