Guide to transforming a large 1D array into individual key:value pairs in JavaScript

Question

Guide to transforming a large 1D array into individual key:value pairs in JavaScript

I have successfully created a free-hand drawing sketchpad in threeJS with the ability to draw shapes. My next step involves utilizing simplify-JS to simplify the points in my polygon. One issue I am facing is that I am passing my array as buffer geometry and using Line Mesh to display it on screen. The array is structured like [x,y,z,x,y,z,x,y,z... and so on], with a maximum of 10000 points as an example.

Vertices[0.555,0.323,298,0.585,0.353,298,0.615,0.373,298...continuous].

Now, I am looking for a way to convert these vertices into an object format like:

Vertices[{x:0.555,y:0.323,z:298}, {x:0.585,y:0.353,z:298},{x:0.615,y:0.373,z:298}]

...and so on for the entire length of Vertices.

Thank you in advance.

javascript three.js

Answer 1

Answer №1

If you want to restructure the array and create a new array with objects, you can achieve this by using a for loop.

var array = [0.555, 0.323, 298, 0.585, 0.353, 298, 0.615, 0.373, 298];
var newArray = [];

for(let i = 0; i < array.length; i += 3){
  newArray.push({ x: array[i], y: array[i+1], z: array[i+2] })
}

console.log(newArray);

UPDATED:

If you need to convert the array back to 1D vertices:

let revertArray = newArray.reduce(((acc, obj) => acc.concat(obj.x, obj.y, obj.z)), []);

~~JSBin: https://jsbin.com/sohakufope/edit?js,console~~

JSBin: https://jsbin.com/bodazugeco/1/edit?js,console

Answer 2

If you want to restructure the array and create a new array with objects, you can achieve this by using a for loop.

var array = [0.555, 0.323, 298, 0.585, 0.353, 298, 0.615, 0.373, 298];
var newArray = [];

for(let i = 0; i < array.length; i += 3){
  newArray.push({ x: array[i], y: array[i+1], z: array[i+2] })
}

console.log(newArray);

UPDATED:

If you need to convert the array back to 1D vertices:

let revertArray = newArray.reduce(((acc, obj) => acc.concat(obj.x, obj.y, obj.z)), []);

~~JSBin: https://jsbin.com/sohakufope/edit?js,console~~

JSBin: https://jsbin.com/bodazugeco/1/edit?js,console

Answer 3

Answer №2

let newVertices = [];
for(let i = 0; i < vertices.length; i += 3) {
    newVertices.push(new THREE.Vector3(vertices[i], vertices[i + 1], vertices[i + 2]);
}

Answer 4

let newVertices = [];
for(let i = 0; i < vertices.length; i += 3) {
    newVertices.push(new THREE.Vector3(vertices[i], vertices[i + 1], vertices[i + 2]);
}

Answer 5

Answer №3

Here is a code snippet that may be helpful

const points = [
    0.555, 0.323, 298,
    0.585, 0.353, 297,
    0.615, 0.373, 296,
    0.123, 0.456, 295,
    0.789, 0.012, 294,
    0.234, 0.569, 293
];

if (points.length % 3 === 0) {
    const parsedPoints = [];
    for (let i = 0; i < points.length; i += 3) {
        parsedPoints.push({ x: points[i], y: points[i + 1], z: points[i + 2] });
    }
    console.table(parsedPoints);
}

Answer 6

Here is a code snippet that may be helpful

const points = [
    0.555, 0.323, 298,
    0.585, 0.353, 297,
    0.615, 0.373, 296,
    0.123, 0.456, 295,
    0.789, 0.012, 294,
    0.234, 0.569, 293
];

if (points.length % 3 === 0) {
    const parsedPoints = [];
    for (let i = 0; i < points.length; i += 3) {
        parsedPoints.push({ x: points[i], y: points[i + 1], z: points[i + 2] });
    }
    console.table(parsedPoints);
}

Answer 7

Answer №4

It would have been helpful if there was actual test data provided for this scenario, but I believe the code snippet below should suffice.

const mappingKeys = ['a', 'b', 'c']
let modifiedArray = [];
let points = [0.555, 0.323, 298, 0.585, 0.353, 298, 0.615, 0.373, 298...continuous]
while (points.length) {
  result = {};
  points.slice(0, 2).forEach((value, index) => { result[mappingKeys[index]] = value });
  modifiedArray.push(result);
  points = points.slice(3);
}

Answer 8

It would have been helpful if there was actual test data provided for this scenario, but I believe the code snippet below should suffice.

const mappingKeys = ['a', 'b', 'c']
let modifiedArray = [];
let points = [0.555, 0.323, 298, 0.585, 0.353, 298, 0.615, 0.373, 298...continuous]
while (points.length) {
  result = {};
  points.slice(0, 2).forEach((value, index) => { result[mappingKeys[index]] = value });
  modifiedArray.push(result);
  points = points.slice(3);
}

Guide to transforming a large 1D array into individual key:value pairs in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to incorporate a fadeIn animation to a text in jQuery?

The JSON file is not filling the options in the dropdown menu

Customizing Bootstrap Vue to prevent tooltips from opening on hover

Running a setTimeout function within the context of a jQuery each

Having trouble importing moment-range into your Angular 4.x application using ES6? Getting an error about incompatible call signatures?

What differences occur in JavaScript when the IE Developers Tools are accessed?

I'm baffled by the unexpected result I'm getting when using 'foreach' in node.js

Invoking a method in Vue.js from another component

Complete my search input by utilizing ajax

How can we use JavaScript to close a dropdown menu when the user clicks outside of it?

What is the best way to cancel a setTimeout in a different function within a React JS application?

Exploring Vue.js3: Simplifying Nested Array Filtering

Setting limits to disable or remove specific times from the time picker input box in Angular

Can Mongoose be integrated into a Next.js API environment?

Vite and Transloadit encountered a type error: Unable to access properties of undefined when trying to read 'Resolver'

How can the "not selected" option be disabled in a Vue Select component?

An effective approach to positioning HTML elements at specific X and Y coordinates

Utilizing AngularJS to extract data from a query string

Clear previous loop data in PHP

Utilize html5 to drag and drop numerous items effortlessly