Response Looping Function

I am struggling with looping and storing data in an array.

    /** Model for displaying response*/
    export class ResultsData {
        id: number,
        name: string,
        startDate: string,
        endDarte: string,
        startTime: string,
        endTime: string,
        city: string,
        country: string
    }

    /**Response received after service call*/
response = [
{ 
    startDate: '04/05/2018', 
    endDate: '05/05/2018' , 
    personDetails : [ { id: 5, name: 'kumar', timeDetails: [{ startTime: ’09:22pm’, endTime: ’08:33’}, { startTime: ’01:22pm’, endTime: ’01:33’}] }, { id: 4, name: 'vishal', timeDetails: [{ startTime: ’09:22pm’, endTime: ’08:33’}, { startTime: ’01:22pm’, endTime: ’01:33’}] } , { id: 2, name: 'dinesh', timeDetails: [{ startTime: ’09:22pm’, endTime: ’08:33’}, { startTime: ’01:22pm’, endTime: ’01:33’}] }],   
    locationDetails : [{city: 'new york', country: 'us'}, {city: 'los angeles', country: 'us'} ]}
]


    /**Component.ts*/
    tableData : Array<ResultsData> = []

My goal is to extract specific details from the nested arrays and store them in a new array.

Expected output: 

tableData = [ 
{ id: 5, name: 'kumar', startDate: '04/05/2018', endDate: '05/05/2018', startTime: ’01:22pm’, endTime: ’01:33’ city: 'los angeles', country: 'us'},  
{ id: 4, name: 'vishal', startDate: '04/05/2018', endDate: '05/05/2018', startTime: ’01:22pm’, endTime: ’01:33’, city: 'los angeles', country: 'us'}, 
{ id: 2, name: 'dinesh', startDate: '04/05/2018', endDate: '05/05/2018', startTime: ’01:22pm’, endTime: ’01:33’, city: 'los angeles', country: 'us'} 
]

Answer №1

If you're looking for a solution, you might want to consider using the constructor approach and map your personDetails data to tableData:

class ProcessedData {
    id: number;
    name: string;
    startDate: string;
    endDate: string;
    startTime: string;
    endTime: string;
    city: string;
    country: string;

    constructor(item) {
      Object.assign(this, item);
    }
}

tableData = response[0].personDetails.map(item => new ProcessedData ({
  id: Number(item.id),
  name: item.name,
  startDate: response[0].startDate,
  endDate: response[0].endDate,
  startTime: item.timeDetails[item.timeDetails.length - 1].startTime,
  endTime: item.timeDetails[item.timeDetails.length - 1].endTime,
  city: response[0].locationDetails[response[0].locationDetails.length - 1].city,
  country: response[0].locationDetails[response[0].locationDetails.length - 1].country
}));

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

preventing firefox from highlighting text on a webpage

Similar Question: What's the most effective method to prevent text highlighting when clicking inside a div using JavaScript? Is there a way to prevent Firefox from highlighting content when a user clicks and drags? ...

Is it considered proper to initialize an empty array within the data object of a Vue.js component?

For my component, I am in need of multiple empty arrays and predefined objects. The data object structure provided below seems to be effective for my purpose. However, I am uncertain if this is the optimal pattern and whether it might lead to unforeseen co ...

How to turn off automatic password suggestions in Chrome and Firefox

Currently, I have integrated a 'change password' feature which includes fields for 'old password', 'new password', and 'retype password'. However, the autocomplete feature is suggesting passwords from other user acco ...

Is there a way for me to streamline the process of logging in using either Google or Facebook?

Is there a way for me to automate the scenario if I'm unable to locate the element using Appium Uiautomator? https://i.stack.imgur.com/Rjji4.png ...

What exactly are AngularJS module dependencies and how do they work together?

After exploring the tutorial example provided on AngularJs's site ( here) (The main HTML appears to be quite minimal with only ng-view and ng-app=phonecatApp included) Within the app.js file, we find: var phonecatApp = angular.module('phoneca ...

Having trouble retrieving information from the JSON data received from the Google Place Search API

I'm encountering an issue with accessing data from the Google Place Search API. I've provided my code below for reference. getData = (keyword, location, country) => { let dataURI = `${URI}${keyword}+${location}+${country}${API}`; var ...

How can one transform a json object into a json string and leverage its functionalities?

I recently encountered an issue with a JSON object that contains a function: var thread = { title: "my title", delete: function() { alert("deleted"); } }; thread.delete(); // alerted "deleted" thread_json = JSON.encode(thread); // co ...

authorization for certain express routes using passport.js

Securing certain express routes with Passport.js authentication Steps for authenticating specific routes in Passport.js Looking for a method to authenticate particular routes using Passport.js Your assistance is greatly appreciated... ...

ng-repeat not functioning properly when using track by, filter, and orderBy

I have come across this code snippet. http://jsfiddle.net/0tgL7u6e/ Scripting in JavaScript var myApp = angular.module('myApp',[]); function MyCtrl($scope) { $scope.nameFilter = ''; $scope.contacts = [ {name: 'G ...

Tips for creating a responsive carousel slider for images

No matter how much I've tried, I can't seem to find a solution on how to make my image responsive along with the caption. Below is my HTML code: <section id="banner"> <div class="banner-bg"> <div class="banner-bg-item ...

Creating a dynamic dropdown menu using JQuery that does not automatically submit the form when a value is

Upon selecting a background color from the dropdown menu, I am generating a dynamic dropdown for text colors. The Text Color dropdown is populated correctly based on the selection of Background Color. Although the functionality works as intended, I encoun ...

Unveiling the Ultimate Method to Package Angular 2 Application using SystemJS and SystemJS-Builder

I'm currently in the process of developing an application and I am faced with a challenge of optimizing the performance of Angular 2 by improving the loading speed of all the scripts. However, I have encountered an error that is hindering my progress: ...

Present information in a tabular format upon identifying an individual's ID using Angular

I encountered a specific issue recently. I successfully connected an API to my database using Angular, and it functions well by displaying all the data in a table. However, when I try to retrieve data for a single ID, the result can only be seen in an inpu ...

Execute JavaScript/AJAX solely upon the selection of a button

Currently, my script is being executed immediately after the page loads and then again after a button click. Is there any way to modify it so that the script waits until I click the button before running? As far as I understand, this code runs asynchronous ...

Entering the appropriate value into an object's property accurately

I am currently facing an issue with typing the value needed to be inserted into an object's property. Please refer below. interface SliceStateType { TrptLimit: number; TrptOffset: number; someString: string; someBool:boolean; } inter ...

Guidelines on maintaining an active getSelection with JavaScript

I need help figuring out how to change the font size of selected text within a div without losing the highlight/selection when I click a button. Can someone assist me in keeping the text highlighted while also resizing it upon clicking the button? ...

Is it possible to inject JavaScript into the DOM after it has been loaded using an AJAX call?

I have a specific div element identified by the id #id1 that contains clickable links. Upon clicking on these links, an AJAX call is made to retrieve additional links from the server. My current approach involves replacing the existing links within #id1 w ...

Stop repeated form submissions in Angular using exhaust map

How can we best utilize exhaust Matp to prevent multiple submissions, particularly when a user is spamming the SAVE button? In the example provided in the code snippet below, how do we ensure that only one submission occurs at a time even if the user click ...

In jQuery, a dropdown selection can be filled with multiple textboxes sharing the same class

I'm experimenting with the idea of using multiple textboxes with the same class filled with different dropdown options that also have the same class. However, I am encountering some issues. When I click on a dropdown option, it changes the value in a ...

Observable subscription does not result in updating the value

One of the challenges I'm currently facing in my Angular application is the synchronization of data from a server. To keep track of when the last synchronization took place, I have implemented a function to retrieve this information: fetchLastSyncDate ...