Iterating over keys instead of objects in AngularJS 2

Question

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?

rashfmnb · Accepted Answer · 2017-01-01 15:46:46Z

1

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>

edited Jan 1, 2017 at 15:46

answered Aug 17, 2016 at 17:49

rashfmnb

10.7k4 gold badges38 silver badges46 bronze badges

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

8 Comments

Scott Deerwester Over a year ago

Thanks for the quick answer. If componentMethod() returns an object (say, of the Region type above), how would I assign the return value to a local variable so that I can use it within the HTML element?

rashfmnb Over a year ago

you can return the specific property or you can use json pipe like this to display whole object <div>{{componentMethodObject | json}}</div>

Scott Deerwester Over a year ago

That's closer, but how would I, for example, display the m49 and name attribute of a region object in the list? I know the following isn't correct, but something like: <..."with r = getRegion()">{{r.m49}}: {{r.name}}

rashfmnb Over a year ago

for this you have to do like this {{getRegion().m49}} : {{getRegion().name}}

Scott Deerwester Over a year ago

Okay, thanks. It looks like, for this particular use case, the best way is to make another sub-component with just the <li> element.

|

user28211632 · Accepted Answer · 2024-11-09 12:41:42Z

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);

Collectives™ on Stack Overflow

Iterating over keys instead of objects in AngularJS 2

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related