How to generate a Javascript Object Array dynamically

Question

I want to "assemble" a JSON object array with data from the database, but some challenges have arisen.

I have the following selection field with a method that is called every time the value is changed - (change)='generateJSON()':

<form [formGroup]='productForm' class="mt-4" autocomplete="off">

    <div class="form-row">
        <div class="form-group col-md-12">
            <label for="ProductName" placement="right" ngbTooltip="Nome do produto">Product Name <small>(POF)</small></label>
            <small *ngIf="productName != null && productName?.ProductInfos != null">
                <a [href]="productName?.ProductInfos" target="_blank" rel="noopener noreferrer">- Intranet ({{ productName?.ProductName | reducedName:25 }})</a>
            </small>
            <ng-select id="ProductName" autofocus (change)="generateJSON()"
                class="isRequired ajustar"
                [items]="productNames"
                [selectOnTab]="true"
                bindLabel="ProductName"
                dropdownPosition="auto"
                labelForId="AccountOwner"
                placeholder="Search a product"
                [virtualScroll]="true"
                formControlName="ProductName">
                    <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                        <div><span [ngOptionHighlight]="search">{{ item.ProductName }}</span></div>
                    </ng-template>
            </ng-select>
        </div>
    </div>

</form>

GenerateJSON method():

public generateJSON(): void {
        this.product = this.productForm.get('ProductName').value;

        this.productHierarchyService.getDataForJSON(this.product.id)
            .subscribe(
                productHierarchy => this.productHierarchy = productHierarchy,
                err => console.log(err),
                () => this.pof_json()
            )
    }

Every time the value of the selection field is changed a query is made in the database bringing all possible settings for a product. Something like:

The pof_json() method has the function of creating JSON dynamically. I would like JSON to follow the following structure.

POF = [
    {
        "ID":"ID_POE",
        "POE_NAME":"POE_NAME",
        "ATTRIBUTES": [
            {
                "ID":"ID_ATTR",
                "ATTR_NAME":"ATTR_NAME",
                "VALUE": [
                    {
                        "ID":"ID_VALUE",
                        "VALUE_NAME":"VALUE_NAME"
                    }
                ]
            }
        ]
    }
]

As you can see, the POF variable is an array of javascript objects that can have one or more POE. And each POE can have one or more Attributes and finally each attribute can have one or more values.

But one of the problems is to remove the repeated information, because, as can be seen in the database image, there are 233 lines, but actually there are only 3 different POE’s and 4 different attributes.

And another challenge would be to correctly associate the values of POE, Attributes and Values. Example: POE -> AC CIRCUIT has 2 attributes and each attribute has its respective values.

Any suggestions on how to do this?

EDIT 1: return value for this.productHierarchy

Answer 1

$.getJSON("Relacionamentos.json", function(data) {
  var POE_IDs = data
    .map(x => x.POE_ID)
    .filter((v, i, s) => s.indexOf(v) === i);

  var test = POE_IDs
    .reduce(
      (a, c) => {

        var ATTRIBUTES = data
          .filter(x => x.POE_ID == c)
          .map(x => x.ATTR_ID)
          .filter((v, i, s) => s.indexOf(v) === i);


        return a.concat({
          ID: c,
          POE_NAME: data.find(x => x.POE_ID == c).POE,
          ATTRIBUTES: ATTRIBUTES.reduce((a2, c2) => a2.concat({
            ID: c2,
            ATTR_NAME: data.find(x => x.POE_ID == c && x.ATTR_ID == c2).ATTR,
            VALUE: data.filter(x => x.POE_ID == c && x.ATTR_ID == c2).reduce((a3, c3) => a3.concat({
              ID: c3.VALUES_ID,
              VALUE: c3.VALUES
            }), [])
          }), [])
        })
      }, []);

      console.log(test);
});

Take a look here, see the return in the console.log: test