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.

jsonangulartypescriptangular6

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering this issue? Error TS2304: Name not found

When I attempt to run unit tests for my Angular application using 'ng test', I encounter the error message: "Error TS2304: Cannot find name.." Interestingly, running 'ng serve' works without any issues. I followed a guide (link provide ...

angularunit-testingkarma-jasmine

Struggling with parsing JSON data on Android devices

After my server-side programmer installed the CoCart API plugin for WordPress on his server, I received a response from the server: { "0c6e4b403b2381e055e3afb9c9e82192": { "key": "0c6e4b403b2381e055e3afb9c9e82192", "product_id": 36187, "variat ...

androidjson

Expanding parent nodes in Jstree to load child nodes dynamically (json)

I am trying to optimize the performance by loading the child nodes of a parent node only after clicking on that specific parent node. It is important because there are many child nodes, so this method helps in keeping the performance high. Currently, I ha ...

javascriptjqueryjsonwebjstree

parse a complex JSON object

Here is the JSON string that I am dealing with: { 'studentinfo': { 'name':'abc', 'age':41, 'gender':male, address: { 'street':'asd', 'city':'ipd', 'state' ...

c#json

several JSON entities within fromJSON

My goal is to utilize the fromJSON() function to parse a .json file containing multiple objects structured in the following way: { "key11": value11, "key12": value12 } { "key11": value11, "key12": value12 } … If I manually enclose the entire file with ...

jsonrjsonlite

The initial row's Id will be used as the Id for all subsequent rows within a JSON object

After dragging a tr in a table and confirming by clicking a button, I need the order list to be updated in the database. To achieve this, I created a JSON object where I intend to save the ids and their corresponding new orders. The issue I am facing is t ...

javascriptjquerynode.jsjson

What is the best way to fetch the id of the option that has been chosen from a bootstrap drop-down menu?

I recently created a basic drop-down list like this: https://i.sstatic.net/4Tlxx.png Here is the HTML code for it: <select class="form-control" id='0' (change)="retrieveValue($event.target)"> <option id='0'>{{ g ...

javascripthtmlangulartypescriptbootstrap-4

Using Mongoose $addToSet to add items to an array only if they are unique

Currently, my code is set up to add new flagDtos using $addToSet without consideration for the uniqueness of item.name. However, I want to change this behavior so that: If item.name is unique, add the new flagDtos object. Otherwise, update the existing fl ...

typescriptmongodbmongoose

Utilize key value pairs to retrieve data from a multi-level array

I'm looking for assistance with extracting values from an array based on key value rather than array number. $json = json_decode($stock, true); print_r($json); $sims = $json['stock'][1]['sims']; foreach ($sims as $sim) { echo ...

phparraysjsonmultidimensional-array

What is the process for showcasing a local notification within my application?

Here is the code snippet I am working with: import { LocalNotifications } from '@ionic-native/local-notifications'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scs ...

javascriptangularionic4

Sass is throwing an error message saying 'Module not found' during the compilation process

After installing sass using npm ($npm install sass), I attempted to create a JSON script. Unfortunately, when running it, I encountered an error stating 'Cannot find module'. ...

javascriptjsonsassbootstrap-5

Showing a header 2 element just once using both *ngFor and *ngIf in Angular

I have an array of words with varying lengths. I am using ng-For to loop through the array and ng-if to display the words based on their lengths, but I am struggling to add titles to separate them. Expected Outcome: 2 letter words: to, am, as... 3 lette ...

arraysangulartypescriptngforangular-ng-if

Having difficulties transmitting numerical values through res.send() in express with node

Currently, I'm faced with a challenge in my express application on node.js as I attempt to retrieve the "imdb rating." movies.json [{ "id": "3962210", "order": [4.361276149749756, 1988], "fields": { "year": 2015, "title": "David and Goliath" ...

javascriptjsonnode.jsexpresscouchdb

Personalized information box utilizing Reactive Extensions in JavaScript

I am currently working on implementing a custom tooltip for a diagram using the vis-network library and RXJS. The key concept is to have: An observable named diagramElementHover$ to display the tooltip An observable named hideTooltipObs$ to hide the too ...

angularrxjs

Tips for organizing an array of objects that contain null properties

Here is an array that I need help with: "data": { "risks": [ { "id": "22", "name": true, "surname": 0.5, "age": 0.75, "heigth" ...

javascriptarraystypescriptsortingobject

How to style FullCalendar to apply background-color for the entire day, not just the event using the 'addEventSource' method

Is it possible to add a background color for the entire day, rather than just for the event itself? The code I've written currently only displays the events with a background color. <script> $(document).ready(function() { $.ajax({ u ...

cssjsoncodeigniterfullcalendar

What is the proper way to utilize queries in BlitzJS?

I am attempting to extract data from a table by filtering based on the relationship with the Blitzjs framework. However, I am facing difficulties using queries as it seems to be the only option available. Every time I try to call the quer ...

typescriptnext.jsblitz.js

Troubleshooting Next.js 14.1 Pre-rendering Issue: A Step-by-Step Guide

I just updated my Next.js from version 14.01 to 14.1 and encountered an error during the build process of my application. How can I resolve this issue? The error message reads as follows: Error occurred while prerendering page "/collections". For more inf ...

javascriptreactjstypescriptnext.js

Restricting the number of lines within a paragraph in Angular 2

Is there a method to limit the number of lines in a <p> tag and add an ellipsis (...) at the end? Using character count for truncation doesn't work well as the width of the element varies according to device screen size. ...

javascripthtmlcssangular

Setting the [required] attribute dynamically on mat-select in Angular 6

I'm working on an Angular v6 app where I need to display a drop-down and make it required based on a boolean value that is set by a checkbox. Here's a snippet of the template code (initially, includeModelVersion is set to false): <mat-checkbo ...

htmlangulartypescriptangular-material