Enter data into the appropriate columns

Question

Enter data into the appropriate columns

Within my Angular 6 application, I am creating a table with the following structure:

Html:

<table>
    <thead>
        <tr>
            <th>
                Property Details &nbsp; &nbsp; &nbsp; &nbsp;
            </th>
            <th>
                {{productOneDetails}}  &nbsp; &nbsp; &nbsp; &nbsp;
            </th>
            <th>
                {{productTwoDetails}} 
            </th>
        </tr> <br>
    </thead>
    <tbody>
        <tr *ngFor="let item of mergedArray">
      <td> {{ item.property_name }} </td>
      <td> {{ item.property_value }} </td>
      <td> {{ item.property_value }} </td>
        </tr>
    </tbody>
</table>

In this setup, there are two arrays within the products object - product one and product two.

The goal is to merge both sets of properties, this.productOneProperties and this.productTwoProperties, and display the combined result in the table.

All functionality currently works as intended.

Working example: https://stackblitz.com/edit/angular-iv8ckz

You will find the current output as follows:

Property Details            Product One         Product Two

Length                        12cm                12cm
Width                         10cm                10cm
Height                        20cm                20cm
Color                         Red                 Red
Size                          Medium              Medium

The desired expected output should be:

Property Details            Product One         Product Two

Length                        12cm                -
Width                         10cm                -
Height                        20cm                -
Color                         -                   Red
Size                          -                   Medium

To achieve this, it is necessary to merge both arrays and feature all properties under the Property Details column.

If a property is only present in one product, the corresponding value should be displayed. Otherwise, show a "-" symbol for empty values.

I trust you understand my requirements and kindly request assistance converting the current output to match the expected output.

javascript angular typescript angular5 angular6

Answer 1

Answer №1

To properly identify each product, assign a type to every object and then use conditions from the template for evaluation.

this.products.productOne.forEach(element => {
  this.productOneDetails = element.product_name; 
  this.productOneProperties = element.productOneProperties.map(item => {item.type = "one"; return item});
});
this.products.productTwo.forEach(element => {
  this.productTwoDetails = element.product_name; 
  this.productTwoProperties = element.productTwoProperties.map(item => {item.type = "two"; return item});

HTML

<tr *ngFor="let item of mergedArray">
  <td> {{ item.property_name }} </td>
  <td> {{ item.type === "one" ? item.property_value: '-' }} </td>
  <td> {{ item.type === "two" ? item.property_value: '-'  }} </td>
 </tr>

Check out the demo here

Answer 2

To properly identify each product, assign a type to every object and then use conditions from the template for evaluation.

this.products.productOne.forEach(element => {
  this.productOneDetails = element.product_name; 
  this.productOneProperties = element.productOneProperties.map(item => {item.type = "one"; return item});
});
this.products.productTwo.forEach(element => {
  this.productTwoDetails = element.product_name; 
  this.productTwoProperties = element.productTwoProperties.map(item => {item.type = "two"; return item});

HTML

<tr *ngFor="let item of mergedArray">
  <td> {{ item.property_name }} </td>
  <td> {{ item.type === "one" ? item.property_value: '-' }} </td>
  <td> {{ item.type === "two" ? item.property_value: '-'  }} </td>
 </tr>

Check out the demo here

Answer 3

Answer №2

The issue lies in the table structure, where the same property is being used to display variables in both columns, resulting in them always showing the same value.

A simple solution would be to associate each object with the product it belongs to. This way, filtering becomes easier:

In the ngOnInit function:

ngOnInit() {
    this.products.productOne.forEach(element => {
      this.productOneDetails = element.product_name;
      this.productOneProperties = element.productOneProperties;
      this.productOneProperties.map(p => {
        p.product = 1;
      });
    });

    this.products.productTwo.forEach(element => {
      this.productTwoDetails = element.product_name;
      this.productTwoProperties = element.productTwoProperties;
      this.productTwoProperties.map(p => {
        p.product = 2;
      });
    });

    this.mergedArray = [...this.productOneProperties, ...this.productTwoProperties];
}

Update your HTML's <tr>:

<tr *ngFor="let item of mergedArray">
  <td> {{ item.property_name }} </td>
  <td> {{ item.product === 1 ? item.property_value : "-" }} </td>
  <td> {{ item.product === 2 ? item.property_value : "-" }} </td>
</tr>

If you prefer not to modify the TypeScript file, you can achieve the desired result by updating the <tr> as follows:

<tr *ngFor="let item of mergedArray">
  <td> {{ item.property_name }} </td>
  <td> {{ productOneProperties.indexOf(item) !== -1 ? item.property_value : "-" }} </td>
  <td> {{ productTwoProperties.indexOf(item) !== -1 ? item.property_value : "-" }} </td>
</tr>

Answer 4

The issue lies in the table structure, where the same property is being used to display variables in both columns, resulting in them always showing the same value.

A simple solution would be to associate each object with the product it belongs to. This way, filtering becomes easier:

In the ngOnInit function:

ngOnInit() {
    this.products.productOne.forEach(element => {
      this.productOneDetails = element.product_name;
      this.productOneProperties = element.productOneProperties;
      this.productOneProperties.map(p => {
        p.product = 1;
      });
    });

    this.products.productTwo.forEach(element => {
      this.productTwoDetails = element.product_name;
      this.productTwoProperties = element.productTwoProperties;
      this.productTwoProperties.map(p => {
        p.product = 2;
      });
    });

    this.mergedArray = [...this.productOneProperties, ...this.productTwoProperties];
}

Update your HTML's <tr>:

<tr *ngFor="let item of mergedArray">
  <td> {{ item.property_name }} </td>
  <td> {{ item.product === 1 ? item.property_value : "-" }} </td>
  <td> {{ item.product === 2 ? item.property_value : "-" }} </td>
</tr>

If you prefer not to modify the TypeScript file, you can achieve the desired result by updating the <tr> as follows:

<tr *ngFor="let item of mergedArray">
  <td> {{ item.property_name }} </td>
  <td> {{ productOneProperties.indexOf(item) !== -1 ? item.property_value : "-" }} </td>
  <td> {{ productTwoProperties.indexOf(item) !== -1 ? item.property_value : "-" }} </td>
</tr>

Enter data into the appropriate columns

Answer №1

Answer №2

Similar questions

"Encountering issues while upgrading Polymer project version from 0.5 to 1.0

Utilizing React Typescript to dynamically render a duo of components

Issue with Jquery Drag and Drop functionality, navigate to a different page

Retrieving information from a datatable in vb.net with an array

Some code paths fail to return a value in Google Cloud Function callable functions

What is preventing me from translating JS Canvas Image?

Transforming an unordered list to function similarly to a select input

Can the individual headers of an ag-grid column be accessed in order to apply an on-mouseover event with a specific method?

I've been stuck for hours, is there anything I should include?

Tips for transferring parameters between functions in AngularJS

Dynamic image sources in reusable Gatsby-Image Component

Make the textarea larger and bring it to the forefront when it is selected

Trying out the MatDialogRef overlayref: A step-by-step guide

Ensuring that each object in a list contains an optional key if any one object includes it is a task handled by Joi validation

Executing a function when clearing an autocomplete textfield in Material-UI

Successive type label

Tips for ensuring the angular FormArray is properly validated within mat-step by utilizing [stepControl] for every mat-step

Attempting to single out various entities within a JSON array through the use of radio buttons

Nodejs restricts the user from performing the action

The chosen Angular material pre-built theme of indigo-pink does not seem to be applied properly