Tips on organizing multiple arrays within a single array

Question

Tips on organizing multiple arrays within a single array

I am retrieving an array from the backend that looks like this:

["[a,b,c],[c,d,e],[e,f,g]"]

Once I grab this array, I place it inside a

<div id="op1">{{$option}}</div>

Now, I want to append additional items to it when I access it in JavaScript using

document.getElementById('op1').innerHTML

and then add these items into another array like this

var options=[document.getElementById('op1').innerHTML];

When I print it out using

console.log(options)

it displays

["[a,b,c],[b,c,d],[e,f,g]"]

This is not the desired format of the array, which should look like this

[[a,b,c],[b,c,d],[e,f,g]]

So my question is, how can I achieve the correct type of array and include more items in it?

javascript arrays

Answer 1

Answer №1

Although I cannot guarantee that this answer is the most efficient solution, I have attempted to provide a solution that closely aligns with your requirements:

var arr = ["[a,b,c],[b,c,d],[e,f,g]"];
var res = [];
arr[0].split('[').forEach((splitVal) => {
  if (splitVal) {
    var arrInner = [];
    var commaSplit = splitVal.split(',');
    commaSplit.forEach((commaSplitVal) => {
      if (commaSplitVal) {
        arrInner.push(commaSplitVal.replace(']', ''));
      }
    });
    res.push(arrInner);
  }
});
console.log(res);

Answer 2

Although I cannot guarantee that this answer is the most efficient solution, I have attempted to provide a solution that closely aligns with your requirements:

var arr = ["[a,b,c],[b,c,d],[e,f,g]"];
var res = [];
arr[0].split('[').forEach((splitVal) => {
  if (splitVal) {
    var arrInner = [];
    var commaSplit = splitVal.split(',');
    commaSplit.forEach((commaSplitVal) => {
      if (commaSplitVal) {
        arrInner.push(commaSplitVal.replace(']', ''));
      }
    });
    res.push(arrInner);
  }
});
console.log(res);

Answer 3

Answer №2

The given data state as shown above ["[x,y,z],[z,a,b],[b,c,d]"] is a JavaScript Array with a single item, which happens to be a string. This string comprises multiple arrays separated by commas.

You have the option to utilize String.prototype.split in order to divide the string into separate arrays using a designated separator.

var choices = [document.getElementById('choice').innerHTML];
var desiredArray = choices.map(element => element.split(','));

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

Answer 4

The given data state as shown above ["[x,y,z],[z,a,b],[b,c,d]"] is a JavaScript Array with a single item, which happens to be a string. This string comprises multiple arrays separated by commas.

You have the option to utilize String.prototype.split in order to divide the string into separate arrays using a designated separator.

var choices = [document.getElementById('choice').innerHTML];
var desiredArray = choices.map(element => element.split(','));

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

Tips on organizing multiple arrays within a single array

Answer №1

Answer №2

Similar questions

Formatting dates in Angular 2 and handling them in MongoDB with Express

Using asynchronous functions in a loop in Node.js

Need help tackling this issue: getting the error message "Route.post() is asking for a callback function, but received [object Undefined]

Can JavaScript impact the appearance of the printed version of a website?

Utilizing ng-model to control the visibility of a label or anchor tag

What could be causing my for loop to become unresponsive?

Revolutionizing messaging with Vue JS and Firebase

Learn the process of playing a video in an HTML5 video player after it has finished downloading

Implementing Angular checkbox repetition controlled from an external controller

Refresh a webpage using JavaScript (inside a jquery ajax call)

Retrieving the data stored in an associative array using JavaScript

"When using the Fetch API to make a POST request, the req.body is found to

Is your $_POST acting oddly? It seems to be doing the opposite of what you'd

Passing a Typescript object as a parameter in a function call

Navigate to various parts of the page easily with a stationary navbar

JavaScript tabs function malfunctioning upon page load

Is it necessary to have a strong understanding of JavaScript in order to effectively utilize jQuery?

The lookat() function in three.js isn't functioning according to my requirements

From JQuery to Vue.js: Transitioning to the Future of

List of values at the precise hour every day for 5 consecutive days