Combining sub-arrays in JavaScript into one single array

Question

Combining sub-arrays in JavaScript into one single array

Upon running the code below, I received the following results:

 d3.csv("../hello.csv", function(data) {
    console.log(data);
    var usable = data.map(function (d) {
        return {    
            description: d.description.split(" ")
        };
    });
    console.log(usable);
});

After checking the console log, I found that the usable output is [object, object, object]. Upon expanding it, I saw the following:

0:Object
  description: Array[3]
    0 : "A"
    1 : "B"
    2 : "C"

1:Object
  description: Array[3]
    0 : "D"
    1 : "E"
    2 : "FG"

2:Object
  description: Array[5]
    0 : "AD"
    1 : "BD"
    2 : "DC"
    4 : "HH"

My goal is to combine all these elements into a single array as shown below:

[A,B,C,D,E,FG,AD,BD,DC,HH]

I am looking for assistance on how to achieve this. Any guidance would be greatly appreciated.

javascript arrays csv d3.js

Answer 1

Answer №1

To flatten the array, you can utilize the D3.merge() method. Let's consider the following objects as an example:

var obj1 = {list: [1, 2, 3]}
var obj2 = {list: [10, 20, 30, 40]};
var obj3 = {list: [100,200,300,400,500]};

var myArray = [obj1, obj2, obj3]; // our array

If we display the content of this array, it will look like this:

console.log("myArray", myArray);

To merge these separate arrays together, you can use the d3.merge(myArray) function:

var flattenedArray = d3.merge([obj1.list, obj2.list, obj3.list]);
console.log("flattenedArray", flattenedArray);

The output will be:

flattenedArray [1, 2, 3, 10, 20, 30, 40, 100, 200, 300, 400, 500]

For a live example, see: JSFiddle

Answer 2

To flatten the array, you can utilize the D3.merge() method. Let's consider the following objects as an example:

var obj1 = {list: [1, 2, 3]}
var obj2 = {list: [10, 20, 30, 40]};
var obj3 = {list: [100,200,300,400,500]};

var myArray = [obj1, obj2, obj3]; // our array

If we display the content of this array, it will look like this:

console.log("myArray", myArray);

To merge these separate arrays together, you can use the d3.merge(myArray) function:

var flattenedArray = d3.merge([obj1.list, obj2.list, obj3.list]);
console.log("flattenedArray", flattenedArray);

The output will be:

flattenedArray [1, 2, 3, 10, 20, 30, 40, 100, 200, 300, 400, 500]

For a live example, see: JSFiddle

Answer 3

Answer №2

How about trying this:

d3.json("../data.json", function(response) {
    console.log(response);
    var allWords = [];
    response.map(function (entry) {
        Array.prototype.push.apply(allWords, entry.text.split(" "));
    });
    console.log(allWords);
});

Answer 4

How about trying this:

d3.json("../data.json", function(response) {
    console.log(response);
    var allWords = [];
    response.map(function (entry) {
        Array.prototype.push.apply(allWords, entry.text.split(" "));
    });
    console.log(allWords);
});

Combining sub-arrays in JavaScript into one single array

Answer №1

Answer №2

Similar questions

Troubles with C++ arrays within if statements

Having trouble getting the jQuery script to properly check file size in an HTML form before uploading?

Unable to retrieve state values or any methods that were declared from renderRow in React-Native

Display complete information of the selected list in a modal window by clicking on it in PHP Yii

Tips for inserting values into an array after converting an object into a string with JSON.stringify(object) in Angular 6

Tips for effectively parsing a sizable JSON document (40mb) using SWIFT

Surprising discovery of the reserved term 'await'

Data vanished from the input field values

What is the method for placing a title in the initial column with the help of v-simple-table from Vuetify.js?

Tips for eliminating flutter for static menu with easyResponsiveTabs.js

Creating reactive behavior with a Promise initiated within a constructor - A guide

Creating string enums in NextJS with TypeScript

What benefits can be gained from utilizing the beforeEach function within Jest testing?

Error in Material UI when using the select component

Displaying Image Preview in Angular 2 After Uploading to Firebase Storage

Incorporating unique numbers in the map reduce process

What's the reason behind beforeunload not triggering?

The CSS stylesheet is not being applied to the components in Next.js

Tips for circumventing if statements in TypeScript-ReactJS?

Reposition the span element to the right of the div tag