CODEWITHSUNDEEP
angular
Scott Deerwester
Scott Deerwester

Reputation: 3977

Iterating over keys instead of objects in AngularJS 2

I have a use case in AngularJS 2 where I have an object with an attribute that is an array of keys, like this:

export class Region {
    m49: string;
    parent: string;
    regions: string[];
    countries: string[];
    name: string; 
}

I have a service that takes a key, and returns the corresponding object:

@Injectable()
export class PlaceService {
    getRegion(m49: string) {
        ...
    }
    getCountry(iso: string) {
        ...
    }
}

I'm trying to build a component that displays the information about a region, and then lists the sub-regions and countries. This displays the region and country keys properly.

@Component({
    selector: 'places',
    template: `
<div>
  <h2>{{region.name}}</h2>
  <div>
    <h3>Regions</h3>
    <ul>
      <li *ngFor="let m49 of region.regions">{{m49}}</li>
    </ul>
  </div>
  <div>
    <h3>Countries</h3>
    <ul>
      <li *ngFor="let iso of region.countries">{{iso}}</li>
    </ul>
  </div>
</div>
`,
    providers: [ PlaceService ]
})

But what I'd really like to do is to get the region and country objects in the loops, and display their properties. How do I invoke a method of the component class to call the service, and retrieve an object, from the <li> elements? Secondarily, how can I use *ngIf on the two child div elements to only include them if the respective lists are non-empty?

Upvotes: 0

Views: 132

Answers (2)

user28211632
user28211632

Reputation: 1

type UserData = {
  name: string;
  count: number;
  status: 'recived' | 'notrecived';
};

type SummarizedData = {
  name: string;
  recivedCount: number;
  notrecivedCount: number;
};

const data: UserData[] = [
  { name: 'user1', count: 4, status: 'recived' },
  { name: 'user2', count: 2, status: 'recived' },
  { name: 'user1', count: 1, status: 'notrecived' },
  { name: 'user2', count: 5, status: 'notrecived' },
];

// Transform the data to group by user and summarize the counts
const summarizeData = (data: UserData[]): SummarizedData[] => {
  const result: { [key: string]: { recivedCount: number; notrecivedCount: number } } = {};

  data.forEach(item => {
    if (!result[item.name]) {
      result[item.name] = { recivedCount: 0, notrecivedCount: 0 };
    }
    if (item.status === 'recived') {
      result[item.name].recivedCount += item.count;
    } else {
      result[item.name].notrecivedCount += item.count;
    }
  });

  // Convert the result object into an array
  return Object.keys(result).map(name => ({
    name,
    recivedCount: result[name].recivedCount,
    notrecivedCount: result[name].notrecivedCount,
  }));
};

// Example usage
const summarized = summarizeData(data);
console.log(summarized);

Upvotes: 0

rashfmnb
rashfmnb

Reputation: 10558

to call the component method do this

{{ componentMethod() }}

and to include div if list is not empty do this

<div *ngIf="list.length > 0"></div>

Upvotes: 1

Related Questions