Adding additional objects to an object overwrites any existing appended data

Check out this pen to see what I'm working on and the issue I'm facing: http://codepen.io/Irish1/pen/lbjdw

I've been working on a program that involves adding a week object, where I can input the name of the week along with a description. However, when I try to add a day to the week, it ends up clearing out the previously entered name and description. This issue only occurs when adding a day for the first time, and I suspect it has something to do with the logic in the ELSE path of my add day method in the controller function below:

$scope.addDay = function(index) {

        if (isDefined($scope.program.weeks[index].days)) {
            $scope.program.weeks[index].days.push(
                {

                }
            );

        } else {
            $scope.program.weeks[index] = { 
                days: [
                    {

                    }
                ]
            };
        }
    };

You can find the complete code in the pen linked above. Any insights on how I can add the first days object without overwriting existing data in the weeks object?

Answer №1

When you assign a new object to the index in the array, all previous properties are "removed".

To only define the "days" property, consider using the following:

$scope.program.weeks[index].days = [ /* .. */ ]

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

What are the steps for generating and implementing shared feature files in Cucumber?

I am currently utilizing Cucumber to define some tests for the project I am working on, but as the application grows larger, I find myself in need of a more efficient structure. project | feature_files | | app1.js | | app2.js | | app3.js ...

What is the reason for both the d3 line chart and bar chart being shown simultaneously?

On my website, I have implemented both a d3 bar chart and a line chart. You can view examples of them here: line_chart and bar_chart. However, in certain situations only one of the charts is displaying instead of both. Can anyone provide guidance on how ...

Error: Unable to decode Chinese characters in JSON due to 'gbk' codec issue

I am in the process of transitioning from Python 2 to Python 3 Within my Jupyter notebook, the code in question is: file = "./data/test.json" with open(file) as data_file: data = json.load(data_file) Previously, this code executed without issue ...

Utilize Ajax to transfer an image from an input form to a PHP script

I am currently working on a basic HTML page that includes an image upload form. Here is the code for the form: <input type='file' id='image_uploaded' accept='image'/> <input type='submit' id="upload_image"/ ...

The ideal version of firebase for showing messages in the foreground

Looking to instantly display notifications as soon as they are received? I recently watched a video on Angular 8 + Firebase where version 7.6.0 was discussed. While the notification is displayed in the foreground for me, I find that I need to click on some ...

What are the steps for implementing webpack 5 configurations in Next.js?

I can't seem to figure out how to properly add experiments to my webpack config. Here is my current environment: [email protected] [email protected] To set up, I started a new Next.js app using the command npx create-next-app blog Accord ...

Is it best to stick with a static page size, or

While I typically design my webpages dynamically by determining the screen size and creating divs accordingly, I'm curious about the advantages of using a 'static' sizing approach (such as using pixels). Any insights on this contrasting meth ...

Mastering Protractor: Implementing browser.sleep within element.all(locator).each(eachFunction)

I am currently expecting the text of each element to be printed one by one, followed by a sleep, and then the next element's text to be printed. However, what is actually happening is that all the texts are being printed first and then a single brows ...

How can we modify this function to interpret multiple selections at once?

For the task of displaying multiple selections from a scrolling list to an alert, I have implemented the following function: var toppings = ""; function displaySelectedToppings() { var topList = document.getElementById('to ...

Invoke a function from a page that has been reloaded using Ajax

After making an Ajax request to reload a page, I need to trigger a JavaScript function on the main page based on certain database conditions. This is necessary because I require some variables from the main page for the function. PHP code: if($reset_regi ...

Passing onClick event to parent component during iteration in ReactJS

I am facing a challenge where I need to remove a row from a table upon a click event. I have managed to create an iteration and display a delete button, but I am struggling with passing the onClick event from the parent component to the child component in ...

What could be causing the "length" property of undefined error when attempting to install React-Bootstrap with the command "npm i react-bootstrap"?

Currently, I am working my way through a comprehensive MERN full-stack tutorial. So far, things have been going smoothly - I used the "npx create-react-app" command to set up the react application and everything is compiling and running perfectly. Howeve ...

Utilizing the power of AngularJS, NodeJS, and Mongoose to create dynamic and

I am relatively new to the world of JavaScript. I am currently experimenting with using pie charts from Highcharts (www.highcharts.com) in conjunction with AngularJS. In the example provided below, everything works smoothly, except for the fact that the "i ...

Activate when every single pixel within an element is see-through

I've designed a web page that includes two canvas elements stacked on top of each other. The purpose of this setup is to allow me to "erase" the top canvas and reveal an image loaded into the bottom canvas. So far, this functionality has been working ...

Is the server delivering an unexpected response?

Implementing a post request using the fetch API in React JS, I provide a URL to the server from the frontend. The server then utilizes this URL to make an API call to Clarifai API. The expected response is received from the API; however, when transferring ...

Which is better: Using AngularJS with Express Templates or sticking with pure HTML? An analysis of the

Express JS utilizes templates to generate HTML which is then sent from the server to the client in response. There are various templates available for generating HTML, some of which include: Jade () EJS () In my application, I need to incorporate bo ...

Save the status of checkboxes in a JSON file using boolean values of true or false

When a user submits a form, I am retrieving the values of checkboxes and storing them as an array. The simplified form structure is as follows: <!-- gym_create.html - other input fields are omitted for brevity --> <form class="create-gym" role=" ...

Is the definition of uniforms present in the THREE.js RawShaderMaterial?

The suggested reading regarding THREE.Js RawShaderMaterial states: Default uniforms and attributes are not automatically included in the GLSL shader code. Nevertheless, I have successfully executed the following shader using a rawShaderMaterial: ...

Delegate the custom deserializer in Jackson back to the default one

Is there a strategy in a custom Jackson deserializer to hand over certain properties to the default deserializer for processing? @Override public final T deserialize(JsonParser jp, DeserializationContext ctxt) throws IOException, JsonProcessingException { ...

Setting up Babel to effectively function across multiple directories

I've been utilizing Babel for some time now and it effectively transforms my ES Next code to the dist directory using this command: babel src --out-dir dist --source-maps --copy-files Up until now, all my JavaScript code has been stored in the src fo ...