Combining arrays in Angular: A step-by-step guide

Below is the provided dataset:

collection = [{
    date: '2020-12-01',
    data: [{
        id: 'A1',
        name: 'A1',
        date: '2020-12-01'
    },{
        name: 'A2',
        date: '2020-12-01'
    },{
        name: 'A3',
        date: '2020-12-01'
    }]
},{
    date: '2020-10-02',
    data: [{
        name: 'B1', 
        date: '2020-10-02'
    },{
        name: 'B2',
        date: '2020-10-02'
    },{
        name: 'B3',
        date: '2020-10-02'
    }]
},{
    date: '2020-10-03',
    data: [{
        name: 'C1',
        date: '2020-10-03'
    },{
        name: 'C2',
        date: '2020-10-03'
    },{
        name: 'C3',
        date: '2020-10-03'
    }]
}];

collection.map((DATA: any) => {

    _COL = _.cloneDeep(DATA['data']);

    
})

Could you please assist with merging the multiple arrays in _COL? I'm encountering an error when attempting to use the findIndex function and equating it to the inputed id, which prevents a successful display.

Answer №1

If you're looking to flatten nested arrays in JavaScript, one option is to utilize the array#flatMap method.

const collection = [{ date: '2020-12-01', data: [{ id: 'A1', name: 'A1', date: '2020-12-01' },{ name: 'A2', date: '2020-12-01' },{ name: 'A3', date: '2020-12-01' }] },{ date: '2020-10-02', data: [{ name: 'B1', date: '2020-10-02' },{ name: 'B2', date: '2020-10-02'},{ name: 'B3', date: '2020-10-02' }] },{ date: '2020-10-03', data: [{ name: 'C1', date: '2020-10-03' },{ name: 'C2', date: '2020-10-03' },{ name: 'C3', date: '2020-10-03' }] }],
      result = collection.flatMap(({data}) => data);
console.log(result);

Another approach is to use a combination of array#map and array#concat.

const collection = [{ date: '2020-12-01', data: [{ id: 'A1', name: 'A1', date: '2020-12-01' },{ name: 'A2', date: '2020-12-01' },{ name: 'A3', date: '2020-12-01' }] },{ date: '2020-10-02', data: [{ name: 'B1', date: '2020-10-02' },{ name: 'B2', date: '2020-10-02'},{ name: 'B3', date: '2020-10-02' }] },{ date: '2020-10-03', data: [{ name: 'C1', date: '2020-10-03' },{ name: 'C2', date: '2020-10-03' },{ name: 'C3', date: '2020-10-03' }] }],
      result = [].concat(...collection.map(({data}) => data));
console.log(result);

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

What is the syntax for accessing a nested object within the .find method?

Currently building an application in node.js. I am struggling with referencing the "email" element in the "userData" object within the Order model when using the find method. Any suggestions on how to properly refer to it? Order model: const orderSchema = ...

Preventing circular dependencies while upholding the structure of modules in Express

I am developing an express app in ES6 and organizing my files by functionality. In this structure, each module has an index.js file that is responsible for exporting relevant methods, classes, etc. Other modules simply require the index.js from another mod ...

What is the best way to activate tooltip visibility on a mobile device?

I have implemented the {onmouseover} variable with the <a> tag to trigger the script function on hover. Here is an example: <a class="tooltip" href="#" onmouseover="tooltip.pop(this, '#tip3', {sticky:true, posit ...

What is the process for including an accessibility icon in screen readers such as JAWS, VoiceOver, and TalkBack?

I was given a task to update the privacy page content which involved dealing with a heart icon in the JSON file. The challenge was ensuring that this icon is accessible to screen reader applications such as JAWS, VoiceOver, and TalkBack. My approach to so ...

Tips on creating horizontally aligned buttons with full width

Currently, I am facing an issue while attempting to create three equal-sized buttons laid out horizontally. However, what I have accomplished so far is displaying three full-width buttons stacked vertically. Here's the code snippet: <section class= ...

What is the best way to check if an object exists in an array in JavaScript and update it if it does, otherwise add it as a new object in

I am working with an array of objects const target = [{name: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89fafbe2c9eee4e8e0e5a7eae6e4">[email protected]</a>', selected: false, alertType: 'max&ap ...

Ways to manipulate controls in an individual row of a table with javascript

My table is receiving dynamically appended rows on button click at the client-side. Here's a link to see it in action: DEMO Each row has a button, and I want to be able to access the controls in the specific row where the button was clicked. How can ...

Selenium's click() method in Python seems to experience issues when used within a script, but functions properly when used through

While working with python 3 selenium, I encountered an issue when trying to login to the Zomato website. When running a script, the login button was clicked but the dialog box did not open. However, when executing the same statements in the command line or ...

Enforce a limit of two decimal places on input fields using jQuery

Looking to limit an input field so that users can only enter numbers with a maximum of two decimals. Is it possible to achieve this using jQuery? Any way I could utilize the jQuery toFixed() function for this purpose? Thank you in advance! ...

The forkJoin method fails to execute the log lines

I've come up with a solution. private retrieveData() { console.log('Start'); const sub1 = this.http['url1'].get(); const sub2 = this.http['url2'].get(); const sub3 = this.http['url3'].get(); ...

Struggling to click on a dynamic link before it times out

Can someone help me with a puzzling issue I can't seem to solve? I am trying to achieve the following: Whenever a link is clicked (for example: mysite.com/blog/blog-article.html), I want to save the href of that link to a variable. Then, in JavaScri ...

Angular 2 (Final): Utilizing resetConfig for seamless integration of routes into lazy loaded modules

Trying to understand the process of dynamically adding routes from a lazy-loaded module. The core app has initial routes: export const routes = [{ path: "", component: HomeComponent }, { path: "moduleA", loadChildren: "app/moduleA/A.module ...

Creating a boundary: A step-by-step guide

There is an element that I need help with <div id="square"></div> This element has the ability to move around the document var square = document.getElementById("square"); document.body.onkeydown = function(e) { if (e.keyCode == 37) { ...

Tips for maintaining selected text while a modal window is active

So I'm currently working on a document writer and I'm utilizing document.execCommand to insert links. What I aim for is the ability for a user to select/highlight text, click a button to add a link to that specific text (via a modal), and then ha ...

Transform the JSON data to generate a fresh JSON output

I'm seeking help to develop a script that generates JSON data based on specific conditions. As of now, I believe my logic is correct. Any assistance would be greatly appreciated. CURRENT ISSUES: [resolved]I am unable to determine why the duration ...

I encountered an issue while attempting to add new data to an array

I am currently working on implementing a tree structure. My main goals are to add, delete, edit, and search data within the tree. However, when I try to push new data into an array, I encounter an error where it says: TypeError: treeData.push is not a fu ...

angular ag-grid error with cell editing

I am encountering issues with updating a cell in ag-grid within my Angular 8 application. Below is the code snippet for reference: this.columns = [ { headerName: '', field: 'enabled', width: 30, headerCheckboxSelection: true, check ...

Parsing JSON data received from Angular using JSP

As I navigate through my Angular application, I'm encountering a challenge when trying to save data on the server side using JSP. The issue arises when Angular's $save method sends the object data in a JSON format that is not familiar to me. This ...

Press the Enter key to submit

Encountering issues while trying to enter an event. Despite reviewing several posts on this matter, a solution has not been found yet. The project needs to function properly in Chrome, FF & IE (8,9,10,11), but it is currently not working on any browser. T ...

Is it possible for me to clear the content of the previous page before the page above it slides

Using the ons-sliding-menu component from Onsen UI, I have encountered an issue. When clicking on a menu item in the behind-page, the above-page slides in but still displays the previous content for a brief moment (although very short, it is noticeable). ...