Learn the process of extracting an array of objects by utilizing an interface

Working with an array of objects containing a large amount of data can be challenging. Here's an example dataset with multiple key-value pairs:

 [{ "id": 1, "name":"name1", age: 11,   "skl": {"name": "KK school"} },
    { "id":2, "name":"name2", age: 12, "skl": {"name": "KK school"} },
    { "id":3, "name":"name3", age: 13, "skl": {"name": "KK school"} },
    { "id":4, "name":"name4", age: 14, "skl": {"name": "KK school"} } ]

If you only need to extract the id, name, and skl name from the array, you can reformat it as follows:

 [  { "id": 1, "name":"name1", "skl": {"name": "KK school"}},
    { "id": 2, "name":"name2", "skl": {"name": "KK school"}},
    { "id": 3, "name":"name3", "skl": {"name": "KK school"}},
    { "id": 4, "name":"name4", "skl": {"name": "KK school"}} ]

Are there any techniques or solutions for efficiently extracting specific data from such arrays of objects?

javascriptangulartypescriptangular9angular-json

Answer №1

There are two options when working with properties: you can specify the ones to keep or the ones to remove:

const data = [
{ "id": 1, "name":"name1", age: 11, "skl": {"name": "KK school"} },
{ "id": 2, "name":"name2", age: 12, "skl": {"name": "KK school"} },
{ "id": 3, "name":"name3", age: 13, "skl": {"name": "KK school"} },
{ "id": 4, "name":"name4", age: 14, "skl": {"name": "KK school"} } ]

// Select specific properties to keep:
console.log(data.map(({id, name, skl})=>({id, name, skl})))

// Choose properties to drop:
console.log(data.map(({age, ...other})=>other))

// For dynamic selection:
console.log(data.map(i=>Object.fromEntries(Object.entries(i)
  .filter(([k])=>['id','name','skl'].includes(k)))))

Answer №2

Loop through an array to extract the age values and return the remaining data without the age key

  data.map(({age,...remaining}) => remaining) // mapping generates a new array

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

Combining two objects by id and grouping identical key-value pairs together

var routePlan = [ { "id" : 1, "farmerName" : "Farmer1", "farmerId" : 1 }, { "id" : 2, "farmerName" : "Farmer2", "farmerId" : 2 }, { "id" : 1, "farmerName" : "Farm ...

javascript

Is it possible to use both "npm install --global" and "--save" simultaneously?

I'm curious if it is practical to use both the --global and --save parameters in the npm install command simultaneously. For instance: npm install gulp -g -s From my understanding, since there is no package.json in the npm system folder, I assume th ...

javascriptnode.jsnpm-install

Calculate the product of a JavaScript variable and a PHP variable, then show the result on the

I need to calculate the product of a PHP variable value and a JavaScript variable, then show the result on the screen. Here is my PHP code: <?php require 'config.php'; session_start(); ?> <html> <head> < ...

javascriptphpjqueryhtmlajax

Adjust the request timeout using Angular

Currently, I am utilizing rxjs and httpclient from Angular to execute a get request. Here is an example of the code: get<T>(path: string): Observable<T> { return this.http .get<T>(path, { headers: this.httpOptions.headers }) ...

angularrxjs

The custom validation process encountered an error: callback is not a valid function

Encountering an issue with a custom validator in node.js while using mongoose. The goal is to verify if a query already exists in the headerLog before attempting to insert it. Take a look at the code snippet below: var mongoose = require('mongoose& ...

javascriptnode.jsmongodbmongoose

PersistJS callback function is malfunctioning

I stumbled upon a great library for managing client storage. You can find the latest version here: https://github.com/jeremydurham/persist-js However, I encountered an issue with the callback function. var result = store.get('saved_data', func ...

javascripthtmlpersistjs

The observable HTTP map appears to be more of a representation rather than a concrete entity

I seem to be struggling with understanding Typescript I expected the returned observable to have a method getTitle(), but it seems to be missing. Instead, I am getting an object that resembles AttachableContentModel without that particular method. What is ...

angulartypescriptrxjsobservable

Strange error message: Attempting to set properties of null (changing 'innerHTML')

I have been working on a project where I am creating a website that retrieves data from a specified URL, displays it on the front end, and performs certain functionalities with that data (although this part is not yet implemented). However, I have encounte ...

javascriptreactjsnext.jsfrontendgoogle-chrome-devtools

I am finding the module.export feature in Express JS to be quite perplex

I recently started learning Express JS with the EJS templating engine, using express-generator to set up my project. I only made a few modifications to the initial code. In the directory structure of my app: MyApp->routes->index.js var express = require( ...

javascriptnode.jsexpress

VueJS fails to display table information

I am facing an issue with rendering data from my API using VueJS 2. Although the backend services are successfully sending the data, the HTML table does not display it. There are no errors shown in the debug console, and even the Vue Debug extension for Fi ...

javascripthtmlvue.jsvuejs2vue-component

Express router parameter matching

Let's consider a scenario where I have two routes - one with parameters and one without: /foo?bar /foo I aim to assign different handlers for these routes. Instead of the conventional approach, I am looking for a way to simplify the code. app.use(&a ...

javascriptnode.jsexpressrouter

Transitioning to Vue 3: [Vue warning]: Prop already has a computed property named "actions"

Currently in the process of migrating a Vue 2 application to Vue 3, I've encountered an issue where I am frequently seeing this warning: [Vue warn]: Computed property "actions" is already defined in Props. This warning pops up in various c ...

javascriptvue.jsvuejs3

Utilize JavaScript to trigger a function depending on the selected options from dropdown menus

I've been working on a fun little project for a web page where users can select two items from a drop-down menu and then click a button to play a sound corresponding to their selections. However, I'm facing some challenges with getting my JavaScr ...

javascripthtmldrop-down-menu

The hovering event trail feature is not functioning in tsParticles, unlike in particlejs

I have two questions regarding the implementation of tsParticles in my React application. First question: <Particles id="tsparticles" options={{ background: { color: { value: "black&quo ...

javascriptcssreactjsparticles.js

Tips for monitoring changes to files while developing a NestJs application within a Docker container

Having an issue with NestJS and Docker here. Trying to run the development script using npm start: dev, but encountering a problem where the app runs fine but doesn't detect any changes in the source files, hindering the development process. Here&apo ...

typescriptdockerdocker-composenestjs

Obtaining the source code in CKEditor while in edit mode with Rails

As a Rails developer, I recently utilized CKEditor in one of my applications. After writing a sample HTML source code in the editor and submitting it, the code displayed properly on the front-end as a GUI. However, when attempting to edit the source code f ...

javascriptjqueryruby-on-railsruby-on-rails-3ckeditor

When a JavaScript/jQuery open window popup triggers the onunload event after the about:blank page has been

Imagine you have a button that triggers a popup using window.open(): <button id = "my-button">Open window</button>​ You also want to detect when this popup window closes. To achieve this, you can use the following code: $('#my-button& ...

javascriptjquerywindow.openonunload

Using Angular to fetch API response and convert it into a promise

I've been following the Angular tutorial available at https://angular.io/tutorial/toh-pt6. The tutorial demonstrates how to retrieve a Json response from an API call and then match it to a promise. One specific example from the tutorial is as follows ...

javascriptangularaws-api-gateway

What could be the reason why the initial console.log is failing to print?

Apologies for the oversight. The !== was a mistake that slipped past me before posting. Thank you for your understanding. I am a beginner in Javascript. I have written this function with winston: function setlogger(log_level = "warn", logfile, scree ...

javascriptfunctionconsole.log

Patience is key when it comes to waiting for a function to finish before moving on to the next step

I'm delving into the world of node js and currently immersing myself in the concepts of promises and async/await. Here's a code snippet I've been experimenting with, but I can't quite figure out how to ensure that the code waits until t ...

javascriptnode.jsasync-await