Discovering the process of iterating through values from multiple arrays of objects and applying them to a new response in Angular 8

Question

Discovering the process of iterating through values from multiple arrays of objects and applying them to a new response in Angular 8

Received the following data from an API response:

const apiResponse = {
    "factoryId": "A_0421",
    "loss": [
        {
            "lossType": "Planned Stoppage Time",
            "duration": "1111"
        },
        {
            "lossType": "Quality Time",
            "duration": "2222"
        }
    ],
    "break": [
        {
            "lossType": "Format",
            "duration": "5.749999",
            "eventCount": "2"
        }
    ],
    "kpi": [
        {
            "mpl": "16556.598475000053"
        }
    ]
};

Looking for code to check if the API response contains arrays for loss, break, and kpi, and then extract and map values to form fields below.

I've attempted the code below but I'm struggling to access all array objects.

Could someone help me iterate through and patch all values in a more efficient manner?

prepareFormForImport(resp) {
      for (let element of resp) {
        return {
        factoryId: null,
          availableTime: {
            bankHoliday: element.loss.lossType === 'Bank Holidays' ? element.duration : 0,
            breakDownTime: element.loss.lossType === 'Quality Time' ? element.duration : 0
            },
            operatingTime: {
                maintenanceTime: element.break.lossType === 'Format' ? element.duration : 0
            },
            uom: element.kpi === 'mpl' ? element.mpl : 0
        }
    }
}

javascript angular typescript angular8

Answer 1

Answer №1

Could you attempt it in this manner?

  dataBundle: any[] = [
    {
      id: null,
      timeAvailability: {
        holiday: null,
        breakdownTime: null,
      },
      operationHours: {
        maintenanceDuration: null,
      },
      unitOfMeasure: null,
    }
  ];

  constructor() { }

  ngOnInit(): void {
    // Emulate the API response
    const apiData = {
      id: "A_0421",
      downtime: [
        {
          type: "Scheduled Downtime",
          duration: "1111"
        },
        {
          type: "Quality Control Time",
          duration: "2222"
        }
      ],
      stops: [
        {
          type: "Format Changeover",
          duration: "5.749999",
          frequency: "2"
        }
      ],
      performanceIndicators: [
        {
          mpl: "16556.598475000053"
        }
      ]
    };

    // Match the data from the API response to dataBundle
    this.transferData(apiData);
  }

  private transferData(apiData: any): void {
    if (apiData.downtime && Array.isArray(apiData.downtime)) {
      apiData.downtime.forEach((item: any) => {
        switch (item.type) {
          case "Scheduled Downtime":
            this.dataBundle[0].timeAvailability.holiday = item.duration;
            break;
          case "Quality Control Time":
            this.dataBundle[0].timeAvailability.breakdownTime = item.duration;
             break;
        }
      });
    }

    if (apiData.stops && Array.isArray(apiData.stops)) {
      apiData.stops.forEach((item: any) => {
        if (item.type === "Format Changeover") {
          this.dataBundle[0].operationHours.maintenanceDuration = item.duration;
        }
      });
    }

    if (apiData.performanceIndicators && Array.isArray(apiData.performanceIndicators)) {
      apiData.performanceIndicators.forEach((item: any) => {
        if (item.mpl) {
          this.dataBundle[0].unitOfMeasure = item.mpl;
        }
      });
    }
  }

Answer 2

Could you attempt it in this manner?

  dataBundle: any[] = [
    {
      id: null,
      timeAvailability: {
        holiday: null,
        breakdownTime: null,
      },
      operationHours: {
        maintenanceDuration: null,
      },
      unitOfMeasure: null,
    }
  ];

  constructor() { }

  ngOnInit(): void {
    // Emulate the API response
    const apiData = {
      id: "A_0421",
      downtime: [
        {
          type: "Scheduled Downtime",
          duration: "1111"
        },
        {
          type: "Quality Control Time",
          duration: "2222"
        }
      ],
      stops: [
        {
          type: "Format Changeover",
          duration: "5.749999",
          frequency: "2"
        }
      ],
      performanceIndicators: [
        {
          mpl: "16556.598475000053"
        }
      ]
    };

    // Match the data from the API response to dataBundle
    this.transferData(apiData);
  }

  private transferData(apiData: any): void {
    if (apiData.downtime && Array.isArray(apiData.downtime)) {
      apiData.downtime.forEach((item: any) => {
        switch (item.type) {
          case "Scheduled Downtime":
            this.dataBundle[0].timeAvailability.holiday = item.duration;
            break;
          case "Quality Control Time":
            this.dataBundle[0].timeAvailability.breakdownTime = item.duration;
             break;
        }
      });
    }

    if (apiData.stops && Array.isArray(apiData.stops)) {
      apiData.stops.forEach((item: any) => {
        if (item.type === "Format Changeover") {
          this.dataBundle[0].operationHours.maintenanceDuration = item.duration;
        }
      });
    }

    if (apiData.performanceIndicators && Array.isArray(apiData.performanceIndicators)) {
      apiData.performanceIndicators.forEach((item: any) => {
        if (item.mpl) {
          this.dataBundle[0].unitOfMeasure = item.mpl;
        }
      });
    }
  }

Answer 3

Answer №2

This response addresses your query @Shilpa

//variables
let bankHoliday = '';
let breakDownTime = '';
let maintenanceTime = '';
let uom = '';

//Extract data from JSON using a function
function fetchData(data) {
  let object = JSON.parse(data);
  
  if(Object.hasOwn(object,'loss') && Object.hasOwn(object, 'break') && Object.hasOwn(object, 'kpi')) {
    object.loss.forEach((obj) => {
      if(obj.lossType === 'Bank Holidays') {
        bankHoliday = Number.parseFloat(obj.duration);
        }
      
      if(obj.lossType === 'Quality Time') {
        breakDownTime = Number.parseFloat(obj.duration);
        }
      });
    
    object.break.forEach((obj) => {
      if(obj.lossType === 'Format') {
        maintenanceTime = Number.parseFloat(obj.duration);
        }
      });
    
    object.kpi.forEach((obj) => {
      if(Object.hasOwn(obj, 'mpl')) {
        uom = Number.parseFloat(obj.mpl);
        }
      });
    
    
    }
   
  }

const apiResponse = '{"factoryId": "A_04","loss": [{"lossType": "Bank Holidays","duration": "1111"},{"lossType": "Quality Time","duration":"2222"}],"break": [{"lossType": "Format","duration": "5.749999","eventCount": "2"}],"kpi": [{"mpl": "16556.598475000053"}]}'
          
function processImportData(apiResponse) {
  fetchData(apiResponse);
  
  //Check if all variables have been populated
  if(bankHoliday !== '' && breakDownTime !== '' && maintenanceTime !== '' && uom !== '') {
    return {
      factoryId: null,
      availableTime: {
        bankHoliday: bankHoliday,
        breakDownTime: breakDownTime,
      },
      operatingTime: {
        maintenanceTime: maintenanceTime,
      },
      uom: uom,
    }
  }
}

Answer 4

This response addresses your query @Shilpa

//variables
let bankHoliday = '';
let breakDownTime = '';
let maintenanceTime = '';
let uom = '';

//Extract data from JSON using a function
function fetchData(data) {
  let object = JSON.parse(data);
  
  if(Object.hasOwn(object,'loss') && Object.hasOwn(object, 'break') && Object.hasOwn(object, 'kpi')) {
    object.loss.forEach((obj) => {
      if(obj.lossType === 'Bank Holidays') {
        bankHoliday = Number.parseFloat(obj.duration);
        }
      
      if(obj.lossType === 'Quality Time') {
        breakDownTime = Number.parseFloat(obj.duration);
        }
      });
    
    object.break.forEach((obj) => {
      if(obj.lossType === 'Format') {
        maintenanceTime = Number.parseFloat(obj.duration);
        }
      });
    
    object.kpi.forEach((obj) => {
      if(Object.hasOwn(obj, 'mpl')) {
        uom = Number.parseFloat(obj.mpl);
        }
      });
    
    
    }
   
  }

const apiResponse = '{"factoryId": "A_04","loss": [{"lossType": "Bank Holidays","duration": "1111"},{"lossType": "Quality Time","duration":"2222"}],"break": [{"lossType": "Format","duration": "5.749999","eventCount": "2"}],"kpi": [{"mpl": "16556.598475000053"}]}'
          
function processImportData(apiResponse) {
  fetchData(apiResponse);
  
  //Check if all variables have been populated
  if(bankHoliday !== '' && breakDownTime !== '' && maintenanceTime !== '' && uom !== '') {
    return {
      factoryId: null,
      availableTime: {
        bankHoliday: bankHoliday,
        breakDownTime: breakDownTime,
      },
      operatingTime: {
        maintenanceTime: maintenanceTime,
      },
      uom: uom,
    }
  }
}

Discovering the process of iterating through values from multiple arrays of objects and applying them to a new response in Angular 8

Answer №1

Answer №2

Similar questions

Use the on-screen keyboard to move around by using the arrow keys and choose a value from the list to

What is the reason behind the widespread adoption of Node.js and NPM for the compilation of JavaScript libraries by

Reorganizing JSON structures by incorporating unique identifiers into nested elements

What is the best method to obtain access to the controls of an item within FormArray?

Ways to verify the successful creation of a child process in NodeJS

Guide on implementing factory updates to the display

At that specific moment, a plugin is active to monitor the execution of JavaScript functions

Different TypeScript parameters that cannot be used together

Integrate a feature in your form that allows users to preview and edit their submission before finalizing

Why is the value in my React Redux state not updating as expected?

Here's how you can use welding techniques to attach objects and incorporate fin-like structures in THREE

Managing User Sessions in Meteor

Tips for transferring data when clicking in Angular 5 from the parent component to the child component

The functionality of the Bootstrap collapse menu is not compatible with Angular

The Angular Progressive Web App functions properly in ng serve mode, but encounters issues when running with http-server

AngularJs input field with a dynamic ng-model for real-time data binding

Deactivate a function within Bootstrap JavaScript

Adjusting elements within nested JavaScript arrays

Creating a compilation of material-ui using browserify

imported classes from a module cannot be accessed within the same module