In order to showcase the data from the second JSON by using the unique identifier

Question

In order to showcase the data from the second JSON by using the unique identifier

SCENARIO:

I currently have two JSON files named contacts and workers:

contacts

[
	{
		"name": "Jhon Doe",
		"gender": "Male",
		"workers": [
			"e39f9302-77b3-4c52-a858-adb67651ce86",
			"38688c41-8fda-41d7-b0f5-c37dce3f5374"
		]
	},
	{
		"name": "Peter Parker",
		"gender": "Male",
		"workers": [
			"e39f9302-77b3-4c52-a858-adb67651ce86",
			"40665c50-ff74-4e81-b968-e127bdf1fe28"
		]
	},
	{
		"name": "Mark Wood",
		"gender": "Male",
		"workers": ["ed780d15-428b-4bcd-8a91-bacae8b0b72e"]
	},
	{
		"name": "Mary Jane",
		"gender": "Female",
		"workers": [
			"40665c50-ff74-4e81-b968-e127bdf1fe28",
			"ed780d15-428b-4bcd-8a91-bacae8b0b72e"
		]
	}
]

workers

[
	{
		"id": "e39f9302-77b3-4c52-a858-adb67651ce86",
		"name": "Alfy Odhams"
	},
	{
		"id": "38688c41-8fda-41d7-b0f5-c37dce3f5374",
		"name": "Allsun Suttle"
	},
	{
		"id": "ed780d15-428b-4bcd-8a91-bacae8b0b72e",
		"name": "Alvinia Ettritch"
	},
	{
		"id": "40665c50-ff74-4e81-b968-e127bdf1fe28",
		"name": "Ambrosi Lindenstrauss"
	}
]

I am presenting the contacts like this:

https://i.stack.imgur.com/VVoCe.png

EXPECTED RESULT :

I aim to exhibit the assigned worker's name for each contact based on their ID as shown here:

https://i.stack.imgur.com/JQIX9.jpg

Check out the DEMO on StackBlitz.

json angular typescript angular6

Answer 1

Answer №1

Here is the requested information

<tr>
    <td>Assigned Employees</td>
    <td>
        <div *ngFor="let eEmployee of employee.contacts">
            <div *ngFor="let employee of employees" [hidden]="eEmployee!=employee.id">
              {{employee.name}}
            </div>
        </div>
    </td>
</tr>

Answer 2

Here is the requested information

<tr>
    <td>Assigned Employees</td>
    <td>
        <div *ngFor="let eEmployee of employee.contacts">
            <div *ngFor="let employee of employees" [hidden]="eEmployee!=employee.id">
              {{employee.name}}
            </div>
        </div>
    </td>
</tr>

Answer 3

Answer №2

If you're looking for a way to find your worker's name based on their ID, you can utilize the Array.prototype.find() method in JavaScript. Simply create a function within your .ts file like this:

 findWorkerName(wid) {
    let obj = this.workers.find(({ id }) => id === wid);

    return obj ? obj.name : '';
}

In your component file, structure it as follows:

<h4>Contacts</h4>
<div class="cust-detail" *ngFor="let contact of contacts">
    <tr>
        <td>Name</td>
        <td>{{contact.name }}</td>
    </tr>
    <tr>
        <td>Gender</td>
        <td>{{contact.gender}} </td>
    </tr>
    <tr>
        <td>Assigned Workers</td>
        <td>
            <span *ngFor="let id of contact.workers let i = index">
            {{findWorkerName(id)}} {{i < contact.workers.length - 1 ? ',' : ''}}
          </span>
        </td>
      </tr>
             <hr>
  </div>

You can view a working demo of this code on StackBlitz. I have made some updates to your existing code.

Answer 4

If you're looking for a way to find your worker's name based on their ID, you can utilize the Array.prototype.find() method in JavaScript. Simply create a function within your .ts file like this:

 findWorkerName(wid) {
    let obj = this.workers.find(({ id }) => id === wid);

    return obj ? obj.name : '';
}

In your component file, structure it as follows:

<h4>Contacts</h4>
<div class="cust-detail" *ngFor="let contact of contacts">
    <tr>
        <td>Name</td>
        <td>{{contact.name }}</td>
    </tr>
    <tr>
        <td>Gender</td>
        <td>{{contact.gender}} </td>
    </tr>
    <tr>
        <td>Assigned Workers</td>
        <td>
            <span *ngFor="let id of contact.workers let i = index">
            {{findWorkerName(id)}} {{i < contact.workers.length - 1 ? ',' : ''}}
          </span>
        </td>
      </tr>
             <hr>
  </div>

You can view a working demo of this code on StackBlitz. I have made some updates to your existing code.

In order to showcase the data from the second JSON by using the unique identifier

Answer №1

Answer №2

Similar questions

Encountering a 404 error in Angular 9 when refreshing the browser

Developing a project using npm and Node.js with Typescript has been smooth sailing so far. However, an issue has arisen

Tips for transferring data between two pop-up windows in Angular2

JSON calls that can be made across different domains

What are the reasons behind the restriction on using non-public members in TypeScript classes?

Edge Runtime does not permit the use of Dynamic Code Evaluation functions such as 'eval', 'new Function', and 'WebAssembly.compile'

What is the Reason FormControl#valueChanges Subscriptions are Not Cleaned up by Garbage Collection?

Enabling CORS header 'Access-Control-Allow-Origin' in Angular 2 using Typescript

Utilizing Next.js to Import a Function from a Path Stored within an Environment Variable

The Angular RXJS HTTPClient fails to properly handle HttpErrorResponses

What could be causing these Typescript compilation errors I am experiencing?

I need help figuring out how to incorporate dynamic checkboxes in Angular

What is the reason behind prettier's insistence on prefixing my IIAFE with ";"?

Can the return type of a function be determined dynamically at runtime by analyzing a function parameter value?

Angular2 - HTML not displaying the response

Providing UI field attributes within server JSON data

Steps to perform a task that relies on two observables

Navigating to an external URL within a component in Angular 4: Tips and Tricks

Show a Mat-Table with distinct values only

Help needed with parsing nested JSON using the $.each function