How to show multiple data values in a parameter passed to a page?

Friends,

I am using ionic 3, I pass some data values as parameter. Each object contains number of data…

I show the data in html template as

<ion-label>Building ID: </ion-label> 
  <ion-item *ngFor="let item of param1">{{item.numBuildingID}}</ion-item> 

  <ion-label>Ward No/Door No: </ion-label> 
  <ion-item *ngFor="let item of param1">{{item.intWardNo}}/{{item.intDoorNo1}}</ion-item> 

But in some cases the dynamic value repeat twice. But in data no duplication.

Please advise a better way to show these values efficiently

Thanks

Anes

Why don’t you try to do like
<ion-list *ngFor=“let item of param1”>
Building ID:
{{item.numBuildingID}}

Ward No/Door No:
{{item.intWardNo}}/{{item.intDoorNo1}}

Friends,

I am using ionic 3, I pass some data values as parameter. Each object contains number of data…

I show the data in html template as

Building ID:
<ion-item *ngFor=“let item of param1”>{{item.numBuildingID}}

Ward No/Door No:
<ion-item *ngFor=“let item of param1”>{{item.intWardNo}}/{{item.intDoorNo1}}

But in some cases the dynamic value repeat twice. But in data no duplication.

Please advise a better way to show these values efficiently

Thanks

Anes

Hi ,

Still I get multiple value … I try only 2 fields

<ion-label>Building ID: </ion-label> 
  <ion-list *ngFor="let item of param1">
      Building ID:
      {{item.numBuildingID}}
      
      Ward No/Door No:
      {{item.intWardNo}}/{{item.intDoorNo1}}
  </ion-list> 

But got it’s result as

Please advise

You are adding Building Id: twice, do something like this and you might get desired result.

Tried your code

 <ion-list *ngFor="let item of param1">
   <ion-item>
     <ion-label>Building ID: {{item.numBuildingID}}</ion-label>
   </ion-item>

  </ion-list>

But still got

pblmdup

Please advise

It will be good if you can show your desired view.

please see my desired output

Detailshowtoshow

problem is on my json return value it has 2 repetitive value from

my json data is

[quote=“anespa, post:8, topic:120236, full:true”]
please see my desired output

buildingBasic [{"numBuildingID":"50290010000001","numZonalID":"5029001","intWardYearID":"1993","wardname":"( 4 ) മായം","intDoorNO":"598","chvownerEng":"K.Jagathamma Pillai","chvAssessEng":"ARV","ptaxold":"0","lcold":"0","surold1":"0","servold":"0","ptaxtotalold":"0","area":"27","chvFunctionalityMal":"പാര്‍പ്പിടാവശ്യം","chvStatusEng":"Approved","form6status":"Approved","ptaxnew":"0","lcnew":"0","sernew":"0","surnew":"0","ptaxtotalnew":"0","wardnameeng":"( 4 ) MAYAM","chvOfficeNameEng":"Main Office","intWardNo":"4","chvRemarksForm6":"--","isDemolished":"0","intDemolishedPeriod":"0","chvCategoryEng":"Authorised","intLBID":"290","Column1":"Amboori Grama Panchayat","intBuildingCategory":"1","Column2":"1. K.Jagathamma Pillai (Puttukallu Puthen Veedu , Njavarakadu , Mayam P O , 695505)","chvWardNameEng":"MAYAM","bitIsCurrent":"2"},{"numBuildingID":"50290010000001","numZonalID":"5029001","intWardYearID":"2013","wardname":"( 1 ) മായം","intDoorNO":"1","chvownerEng":"K.Jagathamma Pillai","chvAssessEng":"ARV","ptaxold":"0","lcold":"0","surold1":"0","servold":"0","ptaxtotalold":"0","area":"27","chvFunctionalityMal":"പാര്‍പ്പിടാവശ്യം","chvStatusEng":"Approved","form6status":"Approved","ptaxnew":"0","lcnew":"0","sernew":"0","surnew":"0","ptaxtotalnew":"0","wardnameeng":"( 1 ) MAYAM","chvOfficeNameEng":"Main Office","intWardNo":"1","chvRemarksForm6":"--","isDemolished":"0","intDemolishedPeriod":"0","chvCategoryEng":"Authorised","intLBID":"290","Column1":"Amboori Grama Panchayat","intBuildingCategory":"1","Column2":"1. K.Jagathamma Pillai (Puttukallu Puthen Veedu , Njavarakadu , Mayam P O , 695505)","chvWardNameEng":"MAYAM","bitIsCurrent":"1"}]

Advise

Friends,

I found out one thing . If I can select the relevant data in webservice i can avoid this problem.
I need a particular data of one section . eg: I need data of Year 2013 in below given json structure…

json

How it can fiter …

Please advise …

Friends,

Filter my data with construct

data = data.filter(function(entry){ return entry.bitIsCurrent === “1” && entry.intWardYearID=== year});

solved my problem …

Thanks alot

I am sorry not able to paste HTML content here. I am new to this platform, do you have any idea how can I paste HTML here.

You CAN USE blockquote …

Ok, Got it.

Suppose your JSON is like this.
data=[{
    'buildingId':'40171010000010',
    'wardNo':1,
    'doorNum':10,
    'owner':'Abdul Rahoof',
    'category':'Authorised',
    'description':'Description of Building',
    'annualTax':604.00,
    'annualLibCess':31.00,
    'surcharge':0,
    'lastUpdated':new Date(),
    'functionality':'Non Government'
  },
  {
    'buildingId':'40171010000011',
    'wardNo':2,
    'doorNum':5,
    'owner':'Kuldeep Singh',
    'category':'Authorised',
    'description':'Description of Building2',
    'annualTax':1604.00,
    'annualLibCess':131.00,
    'surcharge':20.0,
    'lastUpdated':new Date(),
    'functionality':'Non Government'}
  ];

Below HTML code will give you a view as per your need

<ion-card *ngFor="let item of data">
      <div ion-row>
        <div ion-col>
            Building Id    
        </div>
        <div ion-col>
            {{item.buildingId}}
        </div>
      </div>
      <div ion-row>
      <div ion-col>
          Ward No/Door No   
      </div>
      <div ion-col>
          {{item.wardNo}}/{{item.doorNum}}
      </div>
    </div>
    <div ion-row>
      <div ion-col>
          Owner's Name    
      </div>
      <div ion-col>
          {{item.owner}}
      </div>
    </div>
    <div ion-row>
      <div ion-col>
          Category   
      </div>
      <div ion-col>
          {{item.category}}
      </div>
    </div>
    <div ion-row>
      <div ion-col>
          Building Description    
      </div>
      <div ion-col>
          {{item.description}}
      </div>
    </div>
    <div ion-row>
      <div ion-col>
          Annual Tax    
      </div>
      <div ion-col>
          {{item.annualTax}}
      </div>
    </div>
    <div ion-row>
      <div ion-col>
          Annual Library Cess    
      </div>
      <div ion-col>
          {{item.annualLibCess}}
      </div>
    </div>
    <div ion-row>
      <div ion-col>
          Surcharge
      </div>
      <div ion-col>
          {{item.surcharge}}
      </div>
    </div>
    <div ion-row>
      <div ion-col>
          Last Updated     
      </div>
      <div ion-col>
          {{item.lastUpdated | date :'MMM dd yyyy'}}
      </div>
    </div>
    <div ion-row>
      <div ion-col>
          Functionality    
      </div>
      <div ion-col>
          {{item.functionality}}
      </div>
    </div>
  </ion-card>