Transforming an array of objects into a structured model

Upon successfully fetching JSON data, parsing it, and pushing it to an array, the current result is:

[object, object]

The desired transformation involves converting each object into the following data model:

import { ItemModel } from './item.model'; 

export class TodolistModel {
    name: string;
    items: Array<ItemModel> = []; 
}

An attempt was made:

parsedTodolists.forEach(parsedTodolist => {
      let loadChecklist = Object.assign(new TodolistModel(), parsedTodolist); }

However, the outcome of this process appears as follows:

TodolistModel {0: Object, 1: Object, items: Array(0)}

The ultimate goal is to achieve the following structure:

[TodolistModel, TodolistModel]

Your assistance in accomplishing this would be greatly appreciated. Thank you!

Answer №1

When I retrieved the data, it was already in the format of the model, so there was no need to convert it back. It was ready to be used according to the model parameters.

For example:

[TodolistModel, TodolistModel]

The data was stored in a database, retrieved, JSON parsed, and displayed as:

[Object, Object]

Upon pushing it into an array, it appeared as:

[Array (2)]

I mistakenly pushed it into an array when it was already an array. I should have iterated through each object and added them to the array individually.

I made errors in two areas: 1.) Assuming it matched the model already, and 2.) Misunderstanding that JSON.parse creates an array.

Hopefully, this explanation is helpful to someone :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Substitute "Basic Authentication" with "Form Authentication"

Is there a way in W20 to switch from using "Basic Authentication" to "Form Authentication"? The current documentation mentions only the use of "basicAuth" and does not provide information on implementing form authentication. Our app is built with Angular ...

Is it possible to create an index for an associative array based on a string in JavaScript?

Within my JavaScript code, I am working with an associative (two-dimensional) array (myObj[x][y]). Each row in this array contains a different number of elements denoted by 'n', where the first value signifies the amount 'n' as shown be ...

Unveiling the magic: Dynamically displaying or concealing fields in Angular Reactive forms based on conditions

In my current scenario, there are three types of users: 1. Admin with 3 fields: email, firstname, lastname. 2. Employee with 4 fields: email, firstname, lastname, contact. 3. Front Office with 5 fields: email, firstname, lastname, airline details, vendo ...

When using express, encountering a "Cannot GET / on page refresh" error

Currently working on a small MERN stack project. Managed to deploy it on Vercel successfully and the application runs as expected. Navigating to "/classes" and "/students" using the buttons in the browser works fine, however, upon reloading those pages I e ...

Learn how to effectively display checkboxes in an HTML form with Vue configuration

new Vue({ el: '...', data: { checkeditems: [] } }) <div v-for="item in instituteModel" v-if="instituteModel.length > 0"> <input type="checkbox" id="item.id" value="item.inst_name" v-model="checkeditems"/> </div&g ...

React-Router-Dom: The website is failing to render any content on the page

Recently, I started my journey to learn how to use ReactJS and I successfully installed react-router-dom. Excited to implement it, I decided to begin by setting up my App.js file as follows: function App() { return ( <Router> <div> ...

What is the best way to integrate AJAX with draggable columns in a Laravel application?

I have successfully integrated draggable functionality for table columns using jQuery Sortable within my Laravel application. I am now facing the challenge of updating the database with the data from these columns through AJAX. Despite researching online ...

Modifying the clone() property in three.js affects all the meshes in my project

I am looking to create 100 identical cubes with a gradual decrease in opacity for each cube. This is my current loop implementation: var geometry = new THREE.BoxGeometry(0.15,0.15,0.15); var material = new THREE.MeshNormalMaterial(); var cube = new THREE. ...

Monitor the $scope within a factory by utilizing the $http service in AngularJS

I'm attempting to monitor a change in value retrieved from a factory using $http. Below is my factory, which simply retrieves a list of videos from the backend: app.factory('videoHttpService', ['$http', function ($http) { var ...

There seems to be an issue with the Redux connect() higher order component not functioning properly when passing an action creator and

Encountering an issue with the Action creator in react-redux when using the mapDispatchToProps function to return an object to pass into the connect HOC. The strange thing is that it works fine when passing the Action creator directly into the connect HOC, ...

Numpad functionality in JQuery malfunctioning post-ajax request

Using the jQuery numpad plugin has been flawless until after an AJAX call. I have tried various functions like on('click') and others, but unfortunately, none of them worked as expected. Apologies for my poor English! You can find the extension l ...

How can one access DOM elements (getting and setting values) that are nested within an *ngFor loop?

How can I access the <span> and <select> elements in my code template shown below? <div *ngFor="---"> <div> <span></span> <select> <option></option> <option></option> ...

The base64 conversion for the image is overflowing from the upload image field in react-draft-wysiwyg

I have a functional react-draft-wysiwyg editor application that allows me to add images. However, I am currently encountering an issue which is detailed below: https://i.stack.imgur.com/HTjAc.png This is the code snippet of what I have attempted so far. ...

Angular not rendering d3 uniquely when using *ngFor

I am currently working on integrating angular-d3-donut into my web application. Each should have its own SVG(donut). However, when I use *ngFor to generate multiple s with one SVG(donut) each, only one is being created and multiple SVG(donuts) are nested ...

When incorporating script tags in React, an "Unexpected token" error may arise

I am in the process of converting my website to a React site, but I am encountering an issue with the script tags not working. It keeps showing an unexpected token error. Here is the code snippet: <div className="people"> How many people are you ...

Changing the contents of a global array in JavaScript

$(document).ready(function(){ var currArray=null; var group=null; var admin=null; var equipment=null; var student=null; console.log("after get array info"); for(var i=0; i<equipment.length; i++) { console.log("equipment at index after get array info ...

Guide to saving an Object to a file (JSON) within the project directory using React Native for Debuggingpurposes

Feeling a bit overwhelmed trying to tackle this issue. My goal is to save data to a JSON file in real-time while debugging my application. I have a Redux store state that I want to organize neatly in a file for easier debugging, so exporting/writing the ob ...

Responsive design issues with Bootstrap Popover

Whenever I open the popover for the first time, the image is not displayed correctly. How can I ensure that it always shows correctly? Here is a link to the issue: https://jsfiddle.net/n2Lfro30/1/ Below is the button code causing the problem: <button ...

The ASP.net PageMethods are returning an undefined value

Hello everyone, I am attempting to retrieve data from C# to JavaScript using ToolkitScriptManager. Here is my ASPX code: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src=" ...

Utilize Reactjs to efficiently showcase a collection of arrays within an object

I am struggling with a JSON file that has nested dropdown mega menu levels and I can't figure out how to map and render multiple levels of arrays and objects to create a tree-like structure. Here is my current JSON Structure: { "megamenu": [ { ...