Access and bind data from nested 0 index Json data in Angular 5

Question

I am trying to display data from an API's json result in my html using angular 5. I am unable to do i guess due to unnecessary 0 indexes in my json, kindly help. My json looks like -

{
    "Plans": [
        [{
            "PlanId": 1,
            "PlanName": "Free"
        }, {
            "PlanId": 2,
            "PlanName": "Regular"
        }, {
            "PlanId": 3,
            "PlanName": "Premium"
        }]
    ],
    "Location": [
        [{
            "States": [{
                "StateId": 1,
                "Country_Id": 1,
                "StateName": "Alabama"
            }, {
                "StateId": 2,
                "Country_Id": 1,
                "StateName": "Alaska"
            }, {
                "StateId": 3,
                "Country_Id": 1,
                "StateName": "Arizona"
            }, {
                "StateId": 34,
                "Country_Id": 1,
                "StateName": "North Dakota"
            }, {
                "StateId": 50,
                "Country_Id": 1,
                "StateName": "Wyoming"
            }],
            "CountryId": 1,
            "CountryName": "United States of America",
            "CountryCode": "USA"
        }, {
            "States": [{
                "StateId": 51,
                "Country_Id": 2,
                "StateName": "Alberta"
            }, {
                "StateId": 52,
                "Country_Id": 2,
                "StateName": "British Columbia"
            }, {
                "StateId": 53,
                "Country_Id": 2,
                "StateName": "Manitoba"
            }, {
                "StateId": 54,
                "Country_Id": 2,
                "StateName": "New Brunswick"
            }, {
                "StateId": 63,
                "Country_Id": 2,
                "StateName": "Yukon"
            }],
            "CountryId": 2,
            "CountryName": "Canada",
            "CountryCode": "CA"
        }]
    ]
}

Image for 0 indexes I am talking about

I am trying to dynamically generate PlanNames i.e, Free, Regular,

<b>
<div class="col-md-4 text-center"*ngFor="let dummy of Plans" >
   <div class="panel panel-pricing" >
       <div class="panel-heading" >
           <h3>{{dummy.PlanName}}</h3>
       </div>
       <div class="panel-body text-center">
           <p><strong>$100 / Month</strong></p>
       </div>
       <div class="panel-footer">
           <div class="radio">
               <label><input type="radio" name="planradiogroup" id="planradio{{dummy.PlanId}}" [checked]="idx === 0" [value]="dummy.id" (change)="onSelectionChange(dummy)">Option {{dummy.PlanId}}</label>
           </div>
      </div>
   </div>
</div>
</b>

My Component -

`

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})
export class AppComponent implements OnInit {

   readonly apiTravelPlans = "http://localhost:50749/api/TravelGetDetails?type=json";
   plans: any = typeof {};

   constructor (private http:HttpClient){
      this.ngOnInit().subscribe(data=>{
        console.log(data);
       this.plans = data;
      });
    }
   posts: Observable<any>;

   getPosts() {
    this.posts = this.http.get(this.apiTravelPlans) //not used
   }

  ngOnInit(){
    return this.posts = this.http.get(this.apiTravelPlans) // using to load json before my html
  };
}

`

JB Nizet · Accepted Answer · 2018-01-28 10:14:27Z

2

Once you indent the JSON, the structure becomes much easier to understand.

Plans is an array containing a single element, which is also an array.

So, if you really can't fix this structure, you need

*ngFor="let dummy of Plans[0]"

EDIT:

Now that you've posted your code, many other mistakes become apparent.

You're trying to use Plans from your template, but your component doesn't have any property named Plans. You have one named plans which, for an obscure reason, is initialized with typeof {} (why?).

You call this.ngOnInit() from your constructor. Again, that makes no sense. ngOnInit is a hook of your component, called by angular automatically. You must not call it. And its return type is supposed to be void.

The variable plans is initialized asynchronously. So you must test that it's defined (or that its fields are defined if you initialize it to an empty object) before trying to access it. Otherwise, you'll have an error by trying to access field of an object that will be initialized later, asynchronously.

And plans isn't the field Plans of your JSON. It's the enclosing object.

So, in short, your component should look like this:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})
export class AppComponent implements OnInit {

 obj: any; // you should define an interface instead of using any, and choose a good name torefer to the json object

 constructor(private http: HttpClient) { }

 ngOnInit() {
    this.http.get('http://localhost:50749/api/TravelGetDetails?type=json')
      .subscribe(json => this.obj = json);
  };
}

And the view should look like this:

<div *ngIf="obj">
  <div class="col-md-4 text-center"*ngFor="let dummy of obj.Plans[0]">
    ...
  </div>
</div>

edited Jan 28, 2018 at 10:14

answered Jan 28, 2018 at 9:28

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Abhishek Chokra Over a year ago

Thanks for the input sir, I've already tried *ngFor="let dummy of Plans[0]" but it is not working.

JB Nizet Over a year ago

Define "not working", precisely. Post a complete, minimal example reproducing the problem.

Abhishek Chokra Over a year ago

I am not able to generate my Div elements using ngFor in this case, Nothing is generated in my HTML

JB Nizet Over a year ago

Again, post a complete minimal example. What is printed when you add {{ Plans | json }} to your template? Do you at least have a Plans field in your component? How is it initialized? Post a complete minimal example.

Abhishek Chokra Over a year ago

Updated my question with controller and nothing came up in my html ::before ::after

|

Olusegun Orija · Accepted Answer · 2018-03-29 09:40:15Z

0

If this helps anyone:

console.log(this.selectedRequest['interviewDetails']['interviewDate1']);

so interviewDate1 is a property of interviewDetails which is a property/object on selectedRequest.

edited Mar 29, 2018 at 9:40

answered Mar 29, 2018 at 9:34

Olusegun Orija

213 bronze badges

Collectives™ on Stack Overflow

Access and bind data from nested 0 index Json data in Angular 5

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related