TransWikia.com

create view by using two different array

Stack Overflow Asked by Akshay Namdeo on December 23, 2021

I have two arrays . The first one has classId and className

classes = [  {classid : 1 , classname:"class1"},{classid : 2 , classname:"class2"},{classid  : 3 , classname:"class3"}]

The second arrays is:

 subjectWithTopics = [
  {classid:1,subjectName:"hindi", topicName : "topic1 of hindi class id 10" },
  {classid:1,subjectName:"hindi", topicName : "topic2 of hindi class id 10" },
  {classid:1,subjectName:"English", topicName : "topic1 of English class id 10" },
  {classid:1,subjectName:"English", topicName : "topic2 of English class id 10" },
  {classid:1,subjectName:"English", topicName : "topic3 of English class id 10" },
  {classid:2,subjectName:"hINDI", topicName : "topic1 of hINDI class id 20" },
  {classid:2,subjectName:"HINDI", topicName : "topic2 of hINDI class id 20" },
  {classid:2,subjectName:"HINDI", topicName : "topic3 of HINDI class id 20" },
  {classid:2,subjectName:"English", topicName : "topic1 of English class id 20" },
  {classid:2,subjectName:"English", topicName : "topic2 of English class id 20" },
  {classid:2,subjectName:"English", topicName : "topic3 of English class id 20" },
]

what i want is that on left side of the screen i will show buttons according to the classes array using ngFor. On clicking on any of those buttons , right part of screen will show subjects of that class which is clicked with topics of each subject of that class.

What i was thinking is i will capture the classid of class button and then will sort the subjectWithTopics array according to that id but dont know what next then.

please help if anyone can.

3 Answers

component.html

<!-- display unique subject array and on setTopics() will filter topics by subject name-->
<h3>Classes</h3>
<div *ngFor="let classname of classes" style="display:inline-block;">
  <button style="margin: 0px 5px; color: blue;" (click)="setTopics(classname)">{{classname | uppercase}}  </button>
</div>
<h3>Topics</h3>
<div *ngFor="let topic of topics">
  <div (click)="setTopics(topic)">{{topic.topicName}}  </div>
</div>

compoent.ts

import { Component, VERSION, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit{
  name = 'Angular ' + VERSION.major;
  classesArray  = [
  {classid:1,subjectName:"hindi", topicName : "topic1 of hindi class id 10" },
  {classid:1,subjectName:"hindi", topicName : "topic2 of hindi class id 10" },
  {classid:1,subjectName:"English", topicName : "topic1 of English class id 10" },
  {classid:1,subjectName:"English", topicName : "topic2 of English class id 10" },
  {classid:1,subjectName:"English", topicName : "topic3 of English class id 10" },
  {classid:2,subjectName:"hINDI", topicName : "topic1 of hINDI class id 20" },
  {classid:2,subjectName:"HINDI", topicName : "topic2 of hINDI class id 20" },
  {classid:2,subjectName:"HINDI", topicName : "topic3 of HINDI class id 20" },
  {classid:2,subjectName:"English", topicName : "topic1 of English class id 20" },
  {classid:2,subjectName:"English", topicName : "topic2 of English class id 20" },
  {classid:2,subjectName:"English", topicName : "topic3 of English class id 20" },
];
classes = [];
topics = [];
ngOnInit() {
  // find unique class names
  this.classes = this.classesArray.map((obj) => obj.subjectName.toLowerCase());
    this.classes = this.classes.filter((v, i) => this.classes.indexOf(v) === i);
  // default selected subject to hindi
  this.setTopics('hindi');
}
// filter topics by subjectname and generate new topics array
setTopics(subjectName) {
  this.topics = this.classesArray.filter((classes)=> classes.subjectName.toLowerCase() === subjectName.toLowerCase())
}

}

Here is working demo https://stackblitz.com/edit/santosh-angular-array-filter

Answered by Santosh Shinde on December 23, 2021

For this purpose, you can call a method that filters (or sorts, whatever you prefer) the subjectWithTopics array in order to show it.

Let's say you begin with the table at righthand hidden, and will show the selected classId once you click a button.

Hence, we begin with an ngFor that prints all buttons:

<button *ngFor="let c of classes" (click)="selectClass(c)"> 
    {{ c.classname }} 
</button>

The right-handed table, at least in this example, should show all the selected elements for the given classId, or be hidden if it has no elements. I would do it like this:

<table *ngIf="selectedSubjects && selectedSubjects.length > 0" >
    <tr>       
       <th> Subject name </th>
       <th> Subject name </th>
    </tr>
    <tr *ngFor="let subject of selectedSubjects">
       <th> {{ subject.subjectName }} </th>
       <th> {{ subject.topicName }} </th>
    </tr>
</table>

In the controller (.ts file), you write the "selectClass" function, which will filter the subjectWithTopics array, and put it into our newly created array, "selectedSubjects" (which you should define at the controller's class):

selectClass(selectedClass){
   this.selectedSubjects = subjectWithTopics.filter( topic => topic.classId === selectedClass.classid);
}

That should do the trick!

Answered by Zerok on December 23, 2021

You can store the subjects in the variable and render that variable in html.

You can write a function to get Subjects whenever a class is Clicked. For Eg

let subjects = [];
...
getSubjects(classId){
  this.subjects = this.subjectWithTopics.filter(subject=>subject.classId===classId)
}

and then render this function in for loop in html. For Eg

<div ngFor="let subject of subjects">
</div>

Answered by Jatin Parmar on December 23, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP