CODEWITHSUNDEEP
angular
Jay
Jay

Reputation: 153

Angular 2 : not able to render json

I am not able to render the following data in html and am getting an error. The console error is attach below the code. Currently I have single data in json, but it can be more in the future.

Please help as I am new to this. I tried referring similar questions, but it didn't work for me.

/* json */

{
	"statuscode": 1,
	"message": "SUCESS",
	"template": null,
	"filter": {
		"controlNo": "25504",
		"processNo": "3A311",
		"plantCode": "T",
		"deptCode": "AF",
		"modelYear": "2017",
		"prodRate": "475",
		"prodLine": "3",
		"vmc": "A"
	}
}

/* controller */

constructor(private ReportServiceService:ReportServiceService) {   }

  ngOnInit() {  
    this.safetySummary();
  }

  safetySummary(){
    return this.ReportServiceService.getSafetySummary().subscribe(
      res => this.res = res.json())
  }
  
  
/* Error Msg in console */

compiler.es5.js:1689 Uncaught Error: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known property of 'div'. ("t Management - Process / Parts Summary</div>
  </div>
  <div class="container-fluid report-details" [ERROR ->]*ngFor="let i in res.filter">
    <div class="row row-item">
      <div class="col-lg-6 col-md-6 col-"): ng:///AppModule/ProcessPartSummaryComponent.html@166:46
Property binding ngForIn not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
      <div>Unit Management - Process / Parts Summary</div>
  </div>
  [ERROR ->]<div class="container-fluid report-details" *ngFor="let i in res.filter">
    <div class="row row-ite"): ng:///AppModule/ProcessPartSummaryComponent.html@166:2
    at syntaxError (http://localhost:4200/vendor.bundle.js:36022:34)
    at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:47134:19)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:61179:39)
    at http://localhost:4200/vendor.bundle.js:61099:62
    at Set.forEach (native)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:61099:19)
    at http://localhost:4200/vendor.bundle.js:60986:19
    at Object.then (http://localhost:4200/vendor.bundle.js:36012:148)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:60985:26)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:60914:37)
<div class="container-fluid report-details" *ngFor="let i in res.filter">
    <div class="row row-item">
      <div class="col-lg-6 col-md-6 col-sm-6 report-detail-table">
          <span class="width-twenty bold">Process No.:</span>
          <span class="width-thirty">{{i.processNo}}</span>
          <span class="width-ten bold">Line:</span>
          <span class="width-forty">3</span>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6 report-detail-table">
          <span class="width-thirty bold">Model Cycle:</span>
          <span class="width-seventy">2017</span>
      </div>
    </div>
    <div class="row row-item">
      <div class="col-lg-6 col-md-6 col-sm-6 report-detail-table">
          <span class="width-twenty bold">Team:</span>
          <span class="width-thirty">DL01</span>
          <span class="width-ten bold">VMC:</span>
          <span class="width-forty">3</span>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6 report-detail-table">
          <span class="width-thirty bold">Part Effective Date:</span>
          <span class="width-seventy">05/30/2017</span>
      </div>
    </div>
    <div class="row row-item">
      <div class="col-lg-6 col-md-6 col-sm-6 report-detail-table">
          <span class="width-twenty bold">Process Name:</span>
          <span class="width-forty">RIGHT FRONT HARNESS INSTALL</span>
          <span class="width-forty"></span>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6 report-detail-table">
          <span class="width-thirty bold">Body/Line Loc:</span>
          <span class="width-seventy">D01R</span>
      </div>
    </div>
  </div>

Upvotes: 0

Views: 94

Answers (1)

seescode
seescode

Reputation: 2131

let i in res.filter

should be 

let i of res.filter

I've made this mistake multiple times.

Upvotes: 3

Related Questions