Angular show data on the user screen based on the values from the form

Question

I have to display the data on the screen based on the input received via radio buttons by applying certain conditions. I also need help with fetching the id of an object when the name attribute is selected from the radio button. Here is a stackblitz that I have created with all the basic arrays and form made and described what I need in the comments in the .ts file. I have tried to keep the code as clean as I could and to the point. Please ask me for more clarification on the same. Thanks.

Answer 1

I don't know if you see what I done (I don't know how exactly Stackblitz works) but

adding

    const o = this.dummyData.find(x => x.hiringTypeId == this.mergeObj.hiringTypeId && x.processName == this.mergeObj.processName);
    if (o) {
      this.mergeObj.processId = o.processId;
    }
    // NOW ProcessId is set (if found)
    console.log("mergedObject",this.mergeObj)

at line 61 (and adding : any type to mergeObj) gives you corresponding object

In the if (o) block, you even can retrieve your showName field by using o.data[0].name

peace

Answer 2

I am not able to fork the stackblitz

I have tried with that code

please change your addFilter function to

addFilter(filter: NgForm) {

    Object.assign(this.mergeObj, filter.value);
    console.log("ss");

    this.finalArray = this.dummyData.filter(a => {
      return (
        (filter.value.processName == null ||
          filter.value.processName == undefined ||
          filter.value.processName == a.processName) &&
        (filter.value.hiringTypeId == null ||
          filter.value.hiringTypeId == undefined ||
          filter.value.hiringTypeId == a.hiringTypeId)
      );
    });


    filter.reset();
    console.log("mergedObject", this.mergeObj);

    //Add code here
    //Important : right now the mergedObj is giving me the processName and hiringTypeId. I want the mergeObj to give me the processId along with the processName and hiringTypeId. {processName : "selectedValue",processId : "selectedValue", hiringTypeId : "selectedValue"}
  }

you will get result into finalArray

and in your html from line no 25 to .....

<div style="border:1px solid green">
    <!-- <span>Show Data under this or legit anywhere, I have exhausted my every last motivated cell.HELP ME in the name of Baby Yoda</span> -->
    <div *ngFor="let data of finalArray">
        <div>processName : {{data.processName}}</div>
        <div>processId : {{data.processId}}</div>
        <div>hiringTypeId : {{data.hiringTypeId}}</div>
        <div>{{data.data | json}}</div>
    </div>
</div>

Note : Here I have used filter function that will filter data from dummayarray which you are getting from server side but if you want to get only one object than you can use find method it will return only one obj

let me know if you need anything else..

thanks