What is the best way to transform an array of arrays into an array of objects using AngularJS?

Question

What is the best way to transform an array of arrays into an array of objects using AngularJS?

Here is some code I am working on:

$scope.students=[];

$scope.students[[object Object][object Object]]
               [0]{"id":"101","name":"one","marks":"67"}
               [1]{"id":"102","name":"two","marks":"89"}

I would like to reformat it into the following structure.

$scope.students=[{"id":"101","name":"one","marks":"67"},{"id":"102","name":"two","marks":"89"}]

I attempted to use the .map function but it did not work as expected. Now I am looking for a way to convert an array of arrays into an array of objects using AngularJS.

javascript angularjs

Answer 1

Answer №1

Assume the variable students is a two-dimensional array like this:

students = [[{"id":"101","name":"one","marks":"67"}, {"id":"102","name":"two","marks":"89"}]]

To extract each object from the arrays within students and store them in another array, you can use a nested loop in vanilla JavaScript. Below is an example, but there are alternative methods to achieve the same result.

var students = [];
var results = [];

students = [[{"id":"101","name":"one","marks":"67"}, {"id":"102","name":"two","marks":"89"}]]

console.log(students); //array of arrays
console.log('-----'); 
console.log(students[0]); //array of objects
console.log('-----'); 
for (i = 0; i < students.length; i++) { 
    console.log(students[i]); //the array of objects

  for(var j=0; j < students[i].length; j++){
    results.push(students[i][j]);  
  }
}

console.log('--Results---');
console.log(results);

You can also view my code on JSBin: https://jsbin.com/tareku/edit?html,js,console

Answer 2

Assume the variable students is a two-dimensional array like this:

students = [[{"id":"101","name":"one","marks":"67"}, {"id":"102","name":"two","marks":"89"}]]

To extract each object from the arrays within students and store them in another array, you can use a nested loop in vanilla JavaScript. Below is an example, but there are alternative methods to achieve the same result.

var students = [];
var results = [];

students = [[{"id":"101","name":"one","marks":"67"}, {"id":"102","name":"two","marks":"89"}]]

console.log(students); //array of arrays
console.log('-----'); 
console.log(students[0]); //array of objects
console.log('-----'); 
for (i = 0; i < students.length; i++) { 
    console.log(students[i]); //the array of objects

  for(var j=0; j < students[i].length; j++){
    results.push(students[i][j]);  
  }
}

console.log('--Results---');
console.log(results);

You can also view my code on JSBin: https://jsbin.com/tareku/edit?html,js,console

What is the best way to transform an array of arrays into an array of objects using AngularJS?

Answer №1

Similar questions

How to Handle 404 Errors for Specific Express Routes and Not Others

Invoke Javascript through CSS selector

Learn the technique of hovering over an image to see it blur and reveal overlay text

Cheerio's method of extracting data from an HTML table using web scraping

A guide to accessing array elements (JSON) in Angular

Combining various components within an inactive element tag using Vue

immutable chrome sqlite data objects

Issue: Access to sdcard/hello.mp3 file denied due to permission error (EACCES)

Implementation of asynchronous code in event handlers is necessary

Encountering the 401 (Unauthorized) error while attempting to delete data in loopback?

Acquiring data from a separate Redux slice and utilizing it as the default state in a distinct slice

Yeoman - A guide for integrating an express server task into Gruntfile.js from the generator-angular template

Get the image from the express route

Calculating the total of fields from populated documents using Mongoose

JavaScript menu that pops up

Display a div based on search results

I am encountering an issue with the return ( statement and I'm unable to comprehend the reason behind it

The total height of an HTML element, which takes into account the margin of the element itself

While loop not yielding immediate result with asynchronous function

Tips for transferring data from a pop-up or modal window to the main window in ASP.NET MVC