Generate a new JavaScript object and populate it with information

Question

Generate a new JavaScript object and populate it with information

I am looking to create a JavaScript object in the following format:

var CarList = {};

I then want to populate it using a for loop (retrieving data from a MySQL database) similar to this:

for(var i = 0; i < result.length; i++)
{
     CarList.Constructeur = result[i].Constructeur;
     CarList.Modele = result[i].Modele;
     CarList.Couleur = result[i].Couleur;
     CarList.Immat = result[i].Immat;
     CarList.VIN = result[i].VIN;
     CarList.DMC = result[i].Date_Mise_en_circulation;
     CarList.Enregistrement = result[i].Date_enregistrement;
}

The issue I am facing is that only the last car in the database is being displayed. I believe I am missing an [i] somewhere in my code, as it is only creating one car child instead of multiple as per my database.

What is the correct way to address this issue?

I have already attempted using CarList[i], CarList.[i].*, and CarList.car[i].*

javascript object javascript-objects

Answer 1

Answer №1

If you're looking to convert CarList into an array, be sure to initialize it using square brackets instead of curly brackets. Additionally, make sure to create a new object for each element in the array.

let CarList = [];

for(let i = 0; i < result.length; i++)
{
    // Create a new object
    CarList[i] = {};
    CarList[i].Manufacturer = result[i].Manufacturer;
    CarList[i].Model = result[i].Model;
    CarList[i].Color = result[i].Color;
    CarList[i].PlateNumber = result[i].PlateNumber;
    CarList[i].VIN = result[i].VIN;
    CarList[i].DMC = result[i].Date_of_Manufacture;
    CarList[i].Registration = result[i].Registration_Date;
}

Answer 2

If you're looking to convert CarList into an array, be sure to initialize it using square brackets instead of curly brackets. Additionally, make sure to create a new object for each element in the array.

let CarList = [];

for(let i = 0; i < result.length; i++)
{
    // Create a new object
    CarList[i] = {};
    CarList[i].Manufacturer = result[i].Manufacturer;
    CarList[i].Model = result[i].Model;
    CarList[i].Color = result[i].Color;
    CarList[i].PlateNumber = result[i].PlateNumber;
    CarList[i].VIN = result[i].VIN;
    CarList[i].DMC = result[i].Date_of_Manufacture;
    CarList[i].Registration = result[i].Registration_Date;
}

Answer 3

Answer №2

In my opinion, organizing an array of car objects would be beneficial. One way to accomplish this is by utilizing a map function as shown below:

let carList = result.map(car => {
 return {
        Make: car.Make,
        Model: car.Model,
        Color: car.Color,
        LicensePlate: car.LicensePlate,
        VIN: car.VIN,
        DMC: car.Date_Mise_en_circulation,
        Registration: car.Date_enregistrement
     }
})

Another approach is to stick to your current coding style and make use of arr.push()

let carList = [];
for(var i = 0; i < result.length; i++)
{
carList.push({
  Make: result[i].Make,
  Model: result[i].Model,
  Color: result[i].Color,
  LicensePlate: result[i].LicensePlate,
  VIN: result[i].VIN,
  DMC: result[i].Date_Mise_en_circulation,
  Registration: result[i].Date_enregistrement
 })
}

Answer 4

In my opinion, organizing an array of car objects would be beneficial. One way to accomplish this is by utilizing a map function as shown below:

let carList = result.map(car => {
 return {
        Make: car.Make,
        Model: car.Model,
        Color: car.Color,
        LicensePlate: car.LicensePlate,
        VIN: car.VIN,
        DMC: car.Date_Mise_en_circulation,
        Registration: car.Date_enregistrement
     }
})

Another approach is to stick to your current coding style and make use of arr.push()

let carList = [];
for(var i = 0; i < result.length; i++)
{
carList.push({
  Make: result[i].Make,
  Model: result[i].Model,
  Color: result[i].Color,
  LicensePlate: result[i].LicensePlate,
  VIN: result[i].VIN,
  DMC: result[i].Date_Mise_en_circulation,
  Registration: result[i].Date_enregistrement
 })
}

Generate a new JavaScript object and populate it with information

Answer №1

Answer №2

Similar questions

When incorporating Vue as an npm package, a Vue 3 app may inadvertently clear the mounted element upon initialization

Manipulate HTML elements using JavaScript when a key is being held down

Is there a way to display a message box when the mouse cursor hovers over a text box?

Having difficulty implementing the .fadeIn jQuery function on a script for transitioning homepage images

Changing the function to operate asynchronously

How come all the toggle switches are operating simultaneously?

I am encountering an Uncaught TypeError while diagnosing the issue: why is __webpack_require__(...).createServer not functioning as expected

Creating personalized Date and Time formatting on the X axis in Lightningchart JS

Using both ng-if and ng-click in AngularJS for enhanced functionalities

Is there a way to refresh the animation on dougtesting.net?

The property 'createUploadWidget' cannot be read from an undefined source

Operating two independent Angular applications simultaneously on a single webpage

The problem arises when trying to use the Jquery click event on buttons that have been generated

"At the beginning of an array in JavaScript, I often encounter the issue of receiving

Effective methods to avoid showcasing AdSense advertisements

Create a compressed package of a Vue project that can easily be inserted into a Blogger blog post as a single HTML file

Looking for guidance and bug assistance in HTML and JS, possibly involving PHP and MySQL. Can anyone offer advice?

Using axios to retrieve data and then sending it to a localhost server using express

The occurrence of the error "Failed to resolve component" in Vue 3.0.11 seems to be random, particularly when using recursive components

Leveraging JSON data to dynamically create HTML elements with multiple class names and unique IDs, all achieved without relying on