Is there a way to delete values from a JavaScript object and include an index column?

I currently have this incoming dataset:

[]
0:{"time": 1525355921817, "sym": "AAPL", "price": 169.16, "size": 98, "stop": false, …}
1:{"time": 1525355923216, "sym": "AAPL", "price": 170.15, "size": 6, "stop": false, …}
2:{"time": 1525355923216, "sym": "AAPL", "price": 170.06, "size": 57, "stop": false, …}

I require it to be formatted as follows:

0:{"time": 1525355921817, "sym": "AAPL", "price": 169.16, "index": 0}
1:{"time": 1525355923216, "sym": "AAPL", "price": 170.15, "index": 1}
2:{"time": 1525355923216, "sym": "AAPL", "price": 170.06, "index": 2}

In essence, removing the size and stop attributes while adding an index column. Additionally, I need to access it through this.data.price to retrieve all the price values... Is this a feasible task? The data originates from an Angular service.

Could someone guide me on how to accomplish this? (Please keep in mind my limited familiarity with Angular and JavaScript)

javascriptarraysjsonangulartypescript

Answer №1

One way to simplify your code is by using the map function on an array of objects. By deconstructing each object, you can make your code shorter and more efficient.

let arr = [{time: 1525355921817, sym: "AAPL", price: 169.16, size: 98, stop: false,},{time: 1525355923216, sym: "AAPL", price: 170.15, size: 6, stop: false,},{time: 1525355923216, sym: "AAPL", price: 170.06, size: 57, stop: false,}];

let result = arr.map(({size,stop,...r}, i) => Object.assign(r, {index: i}));

console.log( result );

Helpful resources: Using map(), Understanding Destructuring Assignment

Answer №2

You have the option to utilize the .map() function in order to generate the intended output:

let info = [{time: 1525355921817, sym: "AAPL", price: 169.16, size: 98, stop: false},{time: 1525355923216, sym: "AAPL", price: 170.15, size: 6, stop: false},{time: 1525355923216, sym: "AAPL", price: 170.06, size: 57, stop: false}];

let outcome = info.map((item, index) => ({
  time: item.time,
  symbol: item.sym,
  cost: item.price,
  position: index
}));

console.log(outcome);

Answer №3

Is it possible for me to access all the price values through this.data.price?

If we assume that the array is located under data:

const extractPrices = (arr, key) => arr[key] = arr.map(el => el[key]);

extractPrices(this.data, "price");

console.log(this.data.price);

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

Issue with Vue JS component on blade template page

Having trouble loading a Vue component into a Laravel blade file? Despite making changes, the content of my vue file isn't showing up in the blade file - even though there are no errors in the console. Any suggestions on how to resolve this issue woul ...

javascripthtmllaravelvue.js

Attempting to make a slightly bigger than usual AXIOS.post request to a .NET Web API

When attempting to perform an AXIOS.post in a Vue.JS application, the process fails when exceeding about 1500 characters. Instead of reaching the Web API, it goes directly to the error area. Typically, this function calls a .Net Web API that generates a MS ...

javascript.netaxiosasp.net-web-api2

Performing an AJAX request inside of another AJAX request

I have integrated buttons into my website that are activated by JS AJAX loads. By clicking on these buttons, a JavaScript function is executed to load the contents of a PHP file into a specific div element. This setup is crucial as I want to avoid the enti ...

phpjavascripthtmlajax

Deactivating a hyperlink on my print-friendly webpage with JavaScript

My code is designed to generate a printable version of a webpage by duplicating the HTML content and then making certain modifications, such as deactivating buttons upon page load. In addition to disabling buttons, I also aim to deactivate all links on th ...

javascripthtmlanchor

Is it possible to refresh the browser with a specific URL using Node or Gulp?

Excuse me if this is not the appropriate place to pose my query. Unfortunately, due to the limitations of my workplace/CMS setup, I am unable to access a local version of the website for development purposes. Instead, we are working on CSS and JS locally ...

javascriptnode.jsgulpbrowser-sync

The POST Request will exclusively provide the ID in JSON format without including any other data

Trying to make a POST request from Postman to Mongo Database. Currently, only the ID of the object is being returned and the data is not displaying. Data Model: const mongoose = require("mongoose"); const categorySchema = mongoose.Schema({ name: String, ...

javascriptjsonmongodbpostpostman

Problem with displaying legends in a stacked bar chart using jqplot

I am encountering a problem with the legend placement on the jqplot stacked bar chart. I want to customize the positioning of the legend, but my changes are not taking effect. What I desire is this: However, what I am currently seeing in the legend is as ...

javascriptjqueryjqplot

React JS Material UI disabled button under control

I am looking for some guidance. I am working on a feature where I need to disable a button conditionally. The idea is that if something is selected from my table, then the button should be available; otherwise, it should be disabled. MUI requires a boolean ...

javascriptreactjsmaterial-ui

Adjusting the dimensions of images by using the percentage width and height relative to the body

On my website, I am displaying two images that are hosted on another company's server. To ensure these images adjust with the size of the browser window, I have set their width and height as a percentage relative to the body. However, the issue arise ...

javascriptjqueryhtmlcss

Divide the output results into two equal horizontal sections within the same HTML table

Is there a way to dynamically split the output of a specific result into two horizontal sections that fit within the browser width? The number of rows returned from the service is variable, so a fixed solution won't work. I also want to avoid manually ...

javascripthtmlcssangularjshtml-table

The withRouter function in React Router does not automatically inject the router

Desiring to implement withRouter on my primary React component named 'App'. You can view the documentation here. This is how I utilize it: import React from "react"; import { render } from "react-dom"; import {Router, Link, hashHistory, Rout ...

javascriptreactjsreact-routermaterial-ui

Struggling to detect a click event within a VueJS application when using a bootstrap button-group

I am currently working on a VueJS project that includes a bootstrap button group... <div class="btn-group btn-group-xs pull-right" data-toggle="buttons"> <label class="btn btn-primary label-primary"> <input type="radio" name="options" i ...

javascripttwitter-bootstrapvue.js

Guide on how to address the problem of the @tawk.to/tawk-messenger-react module's absence of TypeScript definitions

Is there a way to fix the issue of missing TypeScript definitions for the @tawk.to/tawk-messenger-react module? The module '@tawk.to/tawk-messenger-react' does not have a declaration file. 'c:/develop/eachblock/aquatrack/management-tool-app ...

javascripttypescriptnext.jsnextjs14tawk.to

What could be causing the Dynamic Options to fail to load on the material-react tailwind component?

I am facing an issue with a subcategory select menu that is supposed to display options based on the selected value in the category select input. Both inputs are utilizing the Select and Option components from the material-tailwind/react library. I have ex ...

reactjstypescript

Discovering the permissible array values from numerous arrays inside an object using TypeScript

I have an object with multiple arrays of strings (hardcoded). I want to specify that only strings from that object are allowed in another empty array. In a simple non-nested scenario, I'm achieving this with typeof someArray[number][]. So, I hoped to ...

typescript

Strategies for populating a 2D array with randomly generated strings

Looking for assistance with populating a 2D array with random strings consisting of "_" and "W". I have created the 2D array and a random string generator, but I am struggling to populate the array with the generated string. import java.security.SecureRan ...

javaarraysstringrandom

Tips for utilizing a Three.js curve to guide the movement of a mesh along a specified path

Developing an animation, currently at this stage: http://jsfiddle.net/CoderX99/66b3j9wa/1/ Please avoid delving into the code, it's written in CoffeeScript and may not be beneficial for your mental well-being. Imagine a "nordic" landscape with ship ...

javascriptthree.jscoffeescript

Issue with utilizing Lodash's _.findIndex method while installing lodash through tsd and saving it in an Angular2 project

I have successfully incorporated lodash in two different methods: Method 1: I installed it in bower_component and added declare var _:any; in components. It's working perfectly. Within a click event, I am calling this function: checkLodash() { _.f ...

angularlodash

Best practices for managing storage objects that contain references to other storage objects?

Imagine a scenario involving a billiards application. In this case, there is a requirement for a model called Match, which refers to multiple instances of the Game object. Each Game object contains scoring data related to a specific game. Both the Match an ...

c#jsonazureserialization

Dynamic hovering over isotopic elements

I'm looking to create a webpage where images are arranged dynamically like on this website: . I also want each image to have a hover effect displaying specific information about the image. After some research, I came across a JavaScript library calle ...

javascriptjqueryhtmlcss