Creating a one-dimensional array without utilizing the FlatMap method

My objective is to access the 'values' array of the 'model' array separately. However, the 'flatMap' function is not available in my Angular application without adding "esnext" to the tsconfig.json file. I am exploring alternative methods to achieve the same result without using 'flatMap'. Below is my current implementation:

var model= [
        {
          "values": [
            {
              "colId": 1,
              "value": 7086083333.333333
            },
            {
              "colId": 2,
              "value": null
            },
          ],
          "rowId": 0,
        },
        {
          "values": [
            {
              "colId": 1,
              "value": null
            },
          ],
          "rowId": 1,
          "rowHeader": ""
        },
        {
          "values": [
            {
              "colId": 1,
              "value": null
            },
            {
              "colId": 2,
              "value": null
            },
          ],
          "rowId": 2,
          "rowHeader": ""
        }
      ]
     const data = model.flatMap((wm) => wm.values);
     console.log(data);

Answer №1

If you want to achieve this, the best approach would be to utilize the reduce() method.

var dataset = [{ "values": [{ "colId": 1, "value": 7086083333.333333 }, { "colId": 2, "value": null }, ], "rowId": 0, }, { "values": [{ "colId": 1, "value": null }, ], "rowId": 1, "rowHeader": "" }, { "values": [{ "colId": 1, "value": null }, { "colId": 2, "value": null }, ], "rowId": 2, "rowHeader": "" } ];

const processedData = dataset.reduce((accumulator, current) => {
  return accumulator.concat(current.values);
}, []);

console.log(processedData);

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

Difficulty in updating Vue variable value following a request

Hello everyone, I am facing an issue regarding a variable value. Within the request, I am comparing each array value to see if there is a match and then updating the match variable to true if a match is found. However, the problem arises when the updated ...

A guide on dynamically altering text upon hovering over an element using Vue.js

On my website, I have the following HTML code: <div class="greetings"> <img @mouseover="hover='A'" @mouseleave="hover=''" src="a.png" alt="A" /> <img @mouseover="hover='B'" @mouseleave="hover=''" ...

Exploring the colors of legend navigation icons in Google Pie charts

Is there a way to customize the color of the navigation links in Google pie charts (specifically the blue text in the bottom right corner)? https://i.sstatic.net/Hk591.png ...

JavaScript with dropdown menus

Currently, I am in the process of implementing a JavaScript code snippet that will be triggered when a checkbox is checked. Once the checkbox is checked, the form should display two additional select boxes. My attempt at coding this functionality was not ...

When object signatures match exactly, TypeScript issues a warning

I am facing an issue with typescript while trying to use my own custom type from express' types. When I attempt to pass 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>' as a parameter of type 'Context&a ...

Manipulating text on an image without using canvas, using vanilla JavaScript

I've been working on a project to create a meme generator without using canvas, as part of my DOM manipulation practice in vanilla JavaScript. I'm facing challenges in adding text to the user-submitted pictures and need some guidance in achieving ...

The AngularJS factory does not hold on to its value

I have developed a basic factory to store a value from my authService: app.factory("subfactory", function() { var subValue = {}; return { set: set, get: get }; functi ...

How to apply CSS styling to a specific element using jQuery

When using $(".className"), all elements with the class .className are returned. How can I target a specific element by its index number to apply styling only to that element? <html> <head> <script src="https://ajax.googleapis.com/ajax ...

Encountering an issue with Jest when using jest.spyOn() and mockReturnValueOnce causing an error

jest --passWithNoTests --silent --noStackTrace --runInBand --watch -c jest-unit-config.js Project repository An error occurred at jest.spyOn(bcrypt, 'hash').mockRejectedValue(new Error('Async error message')) Error TS2345: The argum ...

I am unable to retrieve any text from the class as it is returning a null value

Can someone please assist me with two issues I am facing: 1) Firstly, I am trying to match the text of an alert pop-up using the following code: <div class="noty_message message"><span class="noty_text">Uh oh! Email or password is incorrect&l ...

Refine the table by selecting rows that contain a specific value in the href attribute of the <a> tag, and display the parent row when the child row

I've been working on filtering and searching the table below based on the href value. My code successfully filters the displayed columns in the table, but it fails to work when I search for a string within the href attribute. For instance, if I searc ...

Unable to transmit information to PHP file using AJAX

I am working with a php file called graph.php. $host = $_POST['hostname']; echo $type=$_POST['type_char']; include('rrdtools.inc.php'); include('graphs/'.$type.'.inc.php'); and I attempting to send data t ...

Numbering Tables Effectively in ReactJS

Currently working on coding a table in ReactJS and MUI, my goal is to number the No. column from 1 to the length of the array. This snippet shows my code: <TableBody> {quizes.map((quiz, index) => ( <TableRow key={quiz._id}> ...

Using gulp to compile a Vue component without the need for `require` statements

I'm currently exploring the process of constructing a component with Gulp. Right now, I am working on a Vue component that has the following structure: my-component.vue <template> <div class="foo"> </div> </template> < ...

Tips for concealing a button within an ajax response

My JavaScript page includes an AJAX call, and here is the code snippet... $("#txn_post").dialog({ modal: true, title:"Transaction", show: 'blind', hide: 'blind', width: 740, height:550, ...

Reasoning behind splitting this solution into a function utilizing Javascript

Today, while working on a coderbyte problem, I managed to solve it on my own without any outside help, and it felt fantastic. However, upon completion, I realized that I solved it without creating any functions. Rather, I kept referring back to a previous ...

Extract the links from the database using AngularJS

Currently, I am utilizing Laravel 5 for the backend and Angular.js for the frontend. The application operates solely through ajax requests. In my view, I have static links that are always visible on any page. Here is an example of how they are displayed: ...

Tips for resolving the React(TypeScript) issue "Invalid hook call."?

I received an error message stating: "Invalid hook call. Hooks can only be called inside of the body of a function component." within my React function: interface Items { items: any[] } const [items, setItems] = useState<Items>(); const ItemsList ...

How come my counter is still at 0 even though I incremented it within the loop?

Within my HTML file, the code snippet below is present: <div id="userCount" class="number count-to" data-from="0" data-to="" data-speed="1000" data-fresh-interval="20"></div> In my Ja ...

Determining the data type of a textbox value in JavaScript: String or Number?

I am encountering an issue with the code below: <input type="text" value="123" id="txtbox"> <script> var myVar = document.getElementById('txtbox').value; if (myVar.substring) { alert('string'); } else{ alert('number&a ...