Get key and value from an Object using angular 2+

Question

I have an Object like this:

myComponent.ts

this.detailsStruct = this.newParameter.struct;
 //the value of detailsStruct is:
            //{0: "something",
            // 5: "somethingElse"}

where the data of detailsstruct are coming from my mongoDb and I want to have an input form that displays keys and values of my object. In the html I did something like that:

myComponent.html

<div class="form-group" *ngFor="let s of detailsStruct ; let i = index">
 <div class="input-group">
  <input type="text" class="form-control" [ngModelOptions]="{standalone: 
true}"
  [(ngModel)]="s.value" placeholder="" name="{{s[i]}}">
   </div>
</div>

I am trying to get something from my object but what I wrote does not work. Any suggestions? Thanks

Yes detailsStruct is an Object structured like I described above in the comment of the myComponent.ts — GigiProve, Jun 19 '19 at 10:23

Yogesh Dahiya · Answer 1 · 2019-06-19T10:47:11.563

0

You may use this way, I hope this will help to play with your data

for (let obj of this.detailsStruct) {
        for (let prop of Object.keys(obj)) {
            console.log("value-" + obj[prop]);
            console.log("key-" + [prop]);
        }
    }

edited Jun 19 '19 at 10:47

answered Jun 19 '19 at 10:22

Yogesh Dahiya

159
8

The data are coming from my db so I can only get the data that are in that format – GigiProve Jun 19 '19 at 10:25
Okay, you may play with using loop with your first main object and then play with key and value in second loop. – Yogesh Dahiya Jun 19 '19 at 10:43

score 0 · Answer 2 · answered Jun 19 '19 at 10:26

you can try:

<div class="form-group" *ngFor="let key of objectKeys(detailsStruct) ; let i = index">
 <div class="input-group">
  <input type="text" class="form-control" [ngModelOptions]="{standalone: 
true}"
  [(ngModel)]="detailsStruct[key]" placeholder="" name="{{detailsStruct[key]}}">
   </div>
</div>

ts:

objectKeys = Object.keys;
  detailsStruct = {0: "something",
            5: "somethingElse"}

DEMO.

score 0 · Answer 3 · answered Jun 19 '19 at 10:26

If detailsStruct is an object then,

<div class="form-group" *ngFor="let s of Object.keys(detailsStruct) ; let i = index">
 <div class="input-group">
  <input type="text" class="form-control" [ngModelOptions]="{standalone: 
true}"
  [(ngModel)]="detailsStruct[s]" placeholder="" name="s{{i}}">
   </div>
</div>

score 0 · Answer 4 · answered Jun 19 '19 at 10:28

0

Please Try this code: Link https://stackblitz.com/edit/angular-hh82ed

<div class="form-group" *ngFor="let s of detailsStruct ; let i = index">
 <div class="input-group">
  <input type="text" class="form-control" [ngModelOptions]="{standalone: 
true}"
  [(ngModel)]="s[i]" placeholder="" name="{{s[i]}}">
   </div>
</div>

import {AfterViewInit, Component, ElementRef, ViewChild,Renderer2,OnInit} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private renderer: Renderer2, private el: ElementRef) {}
  detailsStruct=[];
  detailsStruct = [{0:"one"},{1:"two"}];
}

Thanks

answered Jun 19 '19 at 10:28

HaSnen Tai

1,353
2
14
22

Yes, I could be a nice staring point but I get the data from mongoDb and they are not an array of object but an object with key and value and I want two input value per row: one for the value and one for the key. In your case I would like to have in one row "0" and "one" and in the other row "1" and "two" – GigiProve Jun 19 '19 at 11:06
Can you please show the format in which you are getting the data from mongoDB i can help you out – HaSnen Tai Jun 19 '19 at 11:35
the value of detailsStruct is: {0: "something", 5: "somethingElse"} – GigiProve Jun 19 '19 at 12:16
i think you should change the format of how you are getting data in result for ease of access – HaSnen Tai Jun 19 '19 at 12:54

Get key and value from an Object using angular 2+

4 Answers4