Learn the process of adding a key and value into an array using Angular

I need to filter data based on the number of rows and columns provided by the user.

After reading an excel file, I extract the data in the controller:

https://i.sstatic.net/vPpxL.png

These are the column headers retrieved after the user entered 5 as the input columns: https://i.sstatic.net/n05OZ.png

Here is the row data obtained when the user specified 4 rows to be displayed, containing data for 4 rows: https://i.sstatic.net/4FT9y.png

In each row, there are key-value pairs consisting of the column name and cell value:

https://i.sstatic.net/XDDKJ.png

I aim to filter this row data based on the header names received through columns, ensuring each row only contains values up to the defined column. Currently, I receive all values within a row.

Even though I've attempted some logic, it's not functioning properly.

var rowData=[];
for(var i=0;i<headerNames.length;i++){//headerNames holds column names
   for(var j=0;j<data.length;j++){//data includes row data
      for(var keyName in data[j])
        if(angular.equals(keyName,headerNames[i])){
           rowData.push({'keyName':data[j][keyName]})//I want to match only key-values with column names. Although I intend to set the keyName value as the array key, it's currently coming as keyName:18
        }
      }
   }
}

Linking the code plunker. http://plnkr.co/edit/28Z44xDBug7nFCQnFCQJL?p=preview

I successfully filter data on the UI to display only the specified row and column data by the user. However, I also need to filter this data on the controller to save it in MongoDB. The goal is to trim the row data according to the column input so that only values up to that column are retained in the array. In my current code, I'm struggling to correctly set the key value as the array key.

Please advise on how to efficiently filter and splice the row values so that each row only contains values up to the specified column numbers. For example, if a user enters 4 rows and 5 columns, I should retain only values up to the 5th column in my row Data array, discarding all other values. As of now, I can't extract the key value to assign it as the array key.

Your assistance in resolving this issue would be greatly appreciated.

Answer №1

It appears that you are nearly there. All you have to do is assign the variable rowData to $scope.rowData so that angular can access it, and make sure the Angular document displays {{rowData}} (which represents $scope.rowData).

You may want to organize it into columns by using ng-repeat on rowData, setting a variable as row, and within TR TD tags displaying row.1

For example:

<tr ng-repeat="row in rowData">
<td>{{row.1}}</td>
<td>{{row.2}}</td>
</tr>

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

Creating complex concave shapes using Three.js from a point cloud

Currently facing a challenge in dynamically creating shapes in three.js from a point cloud. While ConvexGeometry works well for convex shapes, it becomes complex when dealing with concave shapes. The process involves drawing a line on the 2D plane (red li ...

Can the autocomplete feature be utilized in an input field without incorporating a map?

I am struggling with a search field that does not utilize the map functionality. html <input type="text" ui-gmap-search-box ng-model="GeneralFactory.Location" events="searchbox.events" placeholder="Location" class="form-control input-lg"> app.js ...

I have a Three.js Group containing five elements, but I am having trouble accessing the meshes within. Is there a way to properly access the meshes within a Three.js group?

https://i.sstatic.net/cfznC.png I am encountering an issue while trying to access elements within this array. Despite there being a length of 5, the code returns "undefined" and has a length of 0. The image above shows the output of this code. console.log ...

Sending JSON data back to React in a file format

I have a json file within the project that contains the necessary data to display in my component. Can someone guide me on how to properly access the json file in react and output the data from it? data.json { "dictionary": [ { "index": "1", ...

Tips on working with an array received from a PHP script through AJAX

I've been stuck with this issue for the past few hours and I'm hoping to find a solution here. What I'm attempting to do is something like the following: PHP: $errorIds = array(); if(error happens){ array_push($errorIds, $user['user ...

Exploring the world of HTTP PUT requests in Angular 4.0

I have encountered an issue with a function I wrote for sending an http put request to update data. The function is not receiving any data: updateHuman(human: Human) { const url = `${this.url}/${human.id}`; const data = JSON.stringify(human); ...

Use two separate AJAX requests to open and close the modal dialog

I am experiencing an issue with my subscription form that uses modal windows. After closing the window and trying to subscribe again, the ajax calls are being duplicated, resulting in an error. $("#openModal").click(function() { if($("#wname").val() = ...

Discover the most helpful keyboard shortcuts for Next.js 13!

If you're working with a standard Next.js 13 app that doesn't have the experimental app directory, setting up keyboard shortcuts can be done like this: import { useCallback, useEffect } from 'react'; export default function App() { c ...

Learn the process of updating database information with AngularJS through a button click

As a newcomer to Angular, I am facing an issue in my mini project. The main goal of the project is to display data from a database. I have successfully set up the view to show current data by making API calls and connecting to the database. However, I am n ...

Exploring Angular 2: Unveiling the secrets of lifecycle hooks in lazy loaded

Currently, I'm working on an application that involves lazy loaded Angular modules. I have a straightforward inquiry: Is there a way to detect an event once a module is loaded? For instance, similar to the OnInit lifecycle hook for components. I fo ...

FormController instance cannot be found within the parent scope

Issue I am facing a challenge in accessing an AngularJS FormController instance, which was created by setting a name property on a form directive, from its parent controller scope. The result returned is undefined. Curiosity However, I am able to view t ...

Arranging an array of objects by a specific property in an Angular controller with the help of $filter

In my data set, there is an array of objects referred to as $scope.segments, which looks like this: [ { "_id": "55d1167655745c8d3679cdb5", "job_id": "55d0a6feab0332116d74b253", "status": "available", "sequence": 1, "body_original": " ...

The scroll-to-top arrow remains concealed when the height of the html and body elements is set to 100

I recently added a scroll-to-top arrow using Jquery, and it's functioning flawlessly. However, I encountered an issue when I set body and html to a height of 100%, as it mysteriously disappears. View this fiddle for reference The HTML structure is a ...

Navigating through sibling elements can be accomplished by using various methods in

Can someone help me figure out how to assign unique IDs to 6 different Div elements as I step through them? The code snippet below is not working as expected, giving all Divs the same ID. What is the correct way to accomplish this task? $('#main-slid ...

Having difficulty placing a marker on Google Maps

I am currently working on an application that relies on placing markers on a Google map. While the click event functions as expected when I test the code in Chrome, I am facing difficulties with recognizing the touch event on an Android device where I&apos ...

Troubleshooting Angular 2: Instances of Classes Not Being Updated When Retrieving Parameters

I am facing an issue with the following code snippet: testFunction() { let params = <any>{}; if (this.searchTerm) { params.search = this.searchTerm; } // change the URL this.router.navigate(['job-search'], {q ...

Is it possible for Angular2 to map a lone JSON object?

Dealing with a JSON response that is a single object, rather than an array, can be tricky. Recently in my project, I encountered a situation where I needed to map and use such a response from an API to fill out a template. It seemed like a simple task at f ...

Sending a JSON object as a string to PHP

I am currently using a JQuery script to manipulate an image. While most functions are working correctly, I am facing issues with returning data to PHP. Despite trying various examples from Stackoverflow, I have not been able to successfully return the data ...

How do I set up middleware with async/await in NestJS?

I am currently integrating bull-arena into my NestJS application. export class AppModule { configure(consumer: MiddlewareConsumer) { const queues = this.createArenaQueues(); const arena = Arena({ queues }, { disableListen: true }); consumer. ...

Python's Selenium execute script does not support setTimeout function

Hey there! I was attempting to pause the Selenium execution for a few seconds in order to wait for a Modal popup to appear. Unfortunately, using time.sleep(5) did not work with PhantomJS (apparently, PhantomJS does not support sleep function). So, I decide ...