Discover the best method for retrieving or accessing data from an array using Angular

In my data processing task, I have two sets of information. The first set serves as the header data, providing the names of the columns to be displayed.

The second set is the actual data source itself.

My challenge lies in selecting only the data from the JSON file that corresponds to the headers provided in the list.

Here is a snippet of the header data array: 

["Execution_Plan_Note", "Budget", "Reporting_Period", "Budget_Note", "Spend_Plan_Note", "Spend_Plan"]

And here is the link to the Actual Data Source: https://i.sstatic.net/rMsSv.png

So, my goal is to create a new object containing only the data that aligns with the headers specified in the array. If anyone has any suggestions on how to achieve this, please let me know. I have exhausted numerous attempts but haven't found a solution yet.

javascriptangulartypescriptrxjs

Answer №1

To achieve the desired outcome, you may consider utilizing the map and reduce functions as shown in the example below.

const keysArray = ['a', 'b'];
const list = [{a: 'a', b: 'b', c: 'c'}, {a: 'a1', b: 'b1', c: 'c1'}, {a: 'a2', b: 'b2', c: 'c2'}];

const result = list.map(item => keysArray.reduce((acc, key) => {
 acc[key] = item[key];
return acc;
}, {}));

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 best way to align a modal with a layout when it appears far down the components hierarchy?

Struggling with creating a React modal and facing some issues. Let's consider the structure below: React structure <ComponentUsingModal> <Left> <ButtonToActivateModal> ... </ButtonToActivateModa ...

javascripthtmlcssreactjs

Ways to ascertain whether a user has successfully logged in

Just diving into Angular testing and decided to test out the checkLogin function within my application. import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import {AuthenticationService} from &qu ...

angulartypescript

What could be the reason for my user input not being captured and saved as variable data on the HTML webpage?

Here is the code I am working with: var g = document.getElementById("al").value; function start() { document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g); } <p id="test2">Output will be displayed here:</p> <form> ...

javascripthtmlcss

How can we modify specific values of an object using Lodash and return the updated object?

const fruits = { apple: 2, orange: 3, grape: 4, banana: 5 } My aim is to adjust the values of certain fruits while being able to reference their current values. For example: const premiumFrutis = _.doSomething(fruits, apple + 2, banana + ...

javascriptlodash

nodejs promises and their implementation in loops

Currently delving into the realm of promises in nodejs, here's an example code snippet for you to peruse: The result when running the below code is as follows: test - 1 test - 2 test - 3 test - 4 var Q = require('q'); var promise = Q.when( ...

javascriptnode.jspromise

Encountering the error message: ERESOLVE unable to solve dependency tree while trying to install

I'm encountering an error when attempting to install a dependency. How can I resolve this issue? npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" cla ...

node.jsreactjsangularreact-nativenpm

Tips on resolving the 404 path error in Angular2/TypeScript ASP.NET 4.6.1 on Visual Studio 2015

I'm facing a challenge while developing a new application using TypeScript, Angular2, and ASP.NET 4.6.1 on VS2015. Two issues have come up in the process. First problem: I keep encountering 404 errors with the include files in my index.html file. Upo ...

typescriptgulpangular.net-4.6.1

The CSS for SVG circles breaks in Firefox, causing the browser to strip away the radius property

Currently, I am working on creating a progress ring using SVG and CSS. It is functioning well in Chrome; however, Firefox (61.0.1 (64-bit)) is giving me trouble as it does not display the circle. I attempted to apply the method from this question but did n ...

htmlcssangularfirefoxsvg

Is it possible for a lambda in TypeScript to have access to the class scope but return undefined

In my TypeScript code, I have a class used as a Pipe in Angular 2 to render markdown. It compiles successfully but encounters a runtime exception on a specific line: var Remarkable = require('remarkable'); @Pipe({ name: 'markdown' ...

javascripttypescriptangularscopethis

Add a class by utilizing the :class attribute

I reviewed the documentation, but I am still struggling to implement this in my project. Initially, I simply want to display a specific class using vue.js that I can later modify dynamically. I just need to establish the default behavior of that class, so ...

javascripthtmlcssvue.jsvuejs2

Updating the database with values dynamically using ajax without the need to refresh or change the current page

My current challenge involves adding records to a database table without the need to reload the page. I've implemented ajax for this purpose, but have been receiving an unexpected response (201) from the server (alert("Error occurred !")). Despite spe ...

javascriptphpjqueryajax

Obtain the session value in React

Currently, I am working on a React app along with a server-side application. I have successfully created a user session on the server side and now I want to retrieve its value in my React app. Can someone guide me on how to achieve this? const [user,setUse ...

javascriptreactjssession

Triggering an Ajax request by clicking on a link

In the scenario where you have a specific word on a webpage that you would like to trigger an onclick event and initiate an ajax request, what is the best approach to accomplish this? ...

javascripthtmlajax

Steps to arrange by the number of rows in ag grid

I've been experimenting with the rows group feature in ag-grid, But I'm curious if it's feasible to sort the group column based on the number of rows within each group? Here is an example of what I am trying to achieve: https://i.sstatic. ...

angularvue.jsag-grid

Invoke a jQuery method in a dynamic manner

Is it possible to achieve the following? var todo = "text"; $this.eval(todo).split(/\b[\s,\.-:;]*/).length; The desired function is: $this.text().split(/\b[\s,\.-:;]*/).length; I'm struggling to find a solution... Ca ...

javascriptjquery

What is the best way to assign the value of "this" to a variable within a component using Angular 2 and TypeScript?

In my component, I have the following setup: constructor() { this.something = "Hello"; } document.addEventListener('click', doSomething()); function doSomething(e) { console.log(this.something) // this is undefined } I am struggling to a ...

angulartypescript

The state object in Redux Toolkit remains static, resulting in the error message "Uncaught TypeError: Cannot assign to read only property 'property-name' of object '#<Object>'"

I'm facing an issue where I am trying to update the data of a state object in Redux Toolkit but it's not changing, and instead throwing an error that says Uncaught TypeError: Cannot assign to read only property 'status' of object ' ...

javascriptreactjstypescriptredux-toolkit

What is the best way to load a partial in Rails asynchronously with AJAX?

I am currently using the following code to load a partial when I reach the bottom of a div containing a table: $(document).ready(function () { $("#pastGigs").scroll(function () { if (isScrollBottom()) { $('#pastGig ...

javascriptjqueryruby-on-railsajaxasynchronous

AngularJS is a highly intuitive platform that incorporates Google Maps for

I am relatively new to using Angular and decided to experiment with integrating Google Maps into my project. Here's what I need: I have a search bar for finding restaurants. The API returns the address, latitude, and longitude of the restaurant searc ...

javascriptgoogle-mapsangularjsangularjs-directive

Retrieving the value of an object using an array of keys

Consider the following object: const obj = { A:{ a1:'vala1', a2:'vala2' }, B:{ b1: 'valb1', b2: 'valb2' }, C:{ c1:{ c11:'valc11' }, c2:'valc2' } } We also have an array: const ...

angulartypescript