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

Steps to integrating an interface with several anonymous functions in typescript

Retrieving data from Firebase using JavaScript to extract object details

I have been tirelessly attempting to resolve this issue, yet all my efforts have proven futile thus

What is the best way to incorporate background colors into menu items?

Building a personalized payment experience using Python Flask and Stripe Checkout

ng-repeat to display items based on dropdown choice or user's search input

Executing asynchronous JavaScript calls within a loop

Clicking activates Semantic UI's dropdown function with the onClick method

What is the best way to prevent labels from floating to the top when in focus?

Error message when using Vue Global Filter: Value undefined is not defined

Streamlined [JavaScript?] solution for displaying and modifying several location-specific purchasing and selling rates

What is the best way to update a CSS class in React JS?

Attempting to implement a disappearing effect upon submission with the use of JavaScript

Incorporate a personalized style into the wysihtml5 text editor

Ajax in action

Tips for integrating Laravel's blade syntax with Vuejs

Integrating Vue.js code into Laravel's Blade templates for enhanced functionality

Create specification for the properties of the child component

What is the best way to determine if any of the objects in an array contain a "completed" property with a value of false using JavaScript and React?

What is the best way to create a TypeScript function similar to a 'map' in React?