CODEWITHSUNDEEP
jsonangulartypescript
Bireon
Bireon

Reputation: 189

Populate angular form value using json data

I have json response {"CustomerAccount":{"segment":"Enterprise","type":"Domestic"}} this json get from another url. what I did so far this json sent to second url built with angular and already print on console.

I tried to populate the json as a form value in angular page using <input type="text" class="form-control form-control-sm" id="nama-ocr" name="{{ segment }}">

Any one how to do it? what should I put on the component.ts file?

ALso tried populate.js by dannyvankooten from github but just working on non-angular html

Thanks,

Upvotes: 2

Views: 5297

Answers (2)

kenef
kenef

Reputation: 183

Alright if I'm gathering everything correctly you already have the returned json object logging to console. I'm going to assume that you're logging the async return variable to the console. So I'm going to try to help you get that async object stored in a component object and to print the values to your html file.

In your typescript file, you need to export an interface that is structured the same as the data you expect to receive from your service. Do this right after your module imports:

...
import { Component, OnInit } from '@angular/core';
...

export interface CustomerAccountObject {
   CustomerAccount: {
      segment: string;
      type: string;
   }
}

Then later on in your ts file, declare your object:

export class SomeComponent implements OnInit {
   public customerAccountObject: CustomerAccountObject; // We're defining an object and giving it the Type of the interface we just exported.
   ...
}

Now when you subscribe to your data via async, you set the returned json object to your customerAccountObject:

export class SomeComponent implements OnInit {
   public customerAccountObject: CustomerAccountObject;
   ...

   constructor(){}

   this.yourHttpService.yourMethodOrEndPoint(yourParams).subscribe((result) => {
      this.customerAccountObject = JSON.parse(result);
      console.log(this.customerAccountObject);
   });

Now on the html side, you can print your values like so, assuming you want the input VALUE to take the property value:

<input type="text" class="form-control form-control-sm" id="nama-ocr" name="some name" value="{{ customerAccountObject.CustomerAccount.segment }}">

Hope this helps.

Upvotes: 1

Yash
Yash

Reputation: 3576

You can simply bind it using ngModel, sample:

<input type="text" class="form-control form-control-sm" id="nama-ocr" name="segment" [(ngModel)]="myJSON['CustomerAccount']['segment']">

This will automatically update the value in input when your JSON is fetched or updated.

Working sample: https://stackblitz.com/edit/angular-jqh7m6

Upvotes: 1

Related Questions