Manipulating nested JSON objects with AngularJS by adding and pushing the data

I am looking at a JSON object structured like this :

{
    "Name": "Shivansh",
    "RollNo": "1",
    "Stream": "CSE",
    "OverallScore": "76",
    "Semester": [
        {
            "SemesterName": "FY-2012 - 1",
            "TotalScore": "78.00",
            "StartDate" : "2012-02-14",
            "EndDate" : "2012-07-16",
            "Amount" : "55000",
            "Subject": [
                {
                    "subjectname": "maths",
                    "score": "81"
                },
                {
                    "subjectname": "chemistry",
                    "score": "79"
                },
                {
                    "subjectname": "physics",
                    "score": "77"
                }
            ]
        },
        {
            "SemesterName": "FY-2013-1",
            "TotalScore": "76.00",
            "StartDate" : "2013-02-16",
            "EndDate" : "2014-07-16",
            "Amount" : "55000",
            "Subject": [
                {
                    "subjectname": "ADA",
                    "score": "80"
                },
                {
                    "subjectname": "Operating System",
                    "score": "77"
                },
                {
                    "subjectname": "Databases",
                    "score": "73"
                },
                {
                    "subjectname": "Economics",
                    "score": "71"
                }
            ]
        }                
    ]
}

Now I want to insert another semester field into this JSON using angularJS. Is there anyone who can guide me on how to achieve this? The new semester field that needs to be added could look something like this:

{
                    "SemesterName": "FY-2013-2",
                    "TotalScore": "75.00",
                    "StartDate" : "2011-02-16",
                    "EndDate" : "2012-07-16",
                    "Amount" : "55067800",
                    "Subject": [
                        {
                            "subjectname": "Sets and Probability",
                            "score": "78"
                        },
                        {
                            "subjectname": "Networking and Security",
                            "score": "76"
                        },
                        {
                            "subjectname": "Advanced DataBases",
                            "score": "72"
                        },
                        {
                            "subjectname": "Economics-2",
                            "score": "70"
                        }
                    ]
                }

Currently, my controllers have this structure:

$scope.addRowSubject = function() {
            $scope.insertsub = {
                //id = $scope.getSubject.length+1;
                subjectname : '1',
                score : '1'
            };

            $scope.getSubject.push($scope.insertsub);
};

getSubject represents the list of subjects within one semester field. This list can be accessed without any issues.

$scope.addRowSemester = function() {
            $scope.insertsem = {
                //id = $scope.getSemester.length+1;
                StartDate : "1",
                EndDate : "1",
                Amount : "1",
                SemesterName : "1",
                TotalScore : "1",
                Subject : ""
            }
$scope.getSemester.push($scope.insertsem);
};

getSemester holds the list of Semesters for a student.

Although I can successfully add a semester field to my JSON, the Subject field remains null preventing me from adding subjects. Any suggestions on this issue would be appreciated. Thank you in advance.

Answer №1

To properly define the subject properties of your jsonObject, it is important that it be an instance of an array as illustrated below:

$scope.addRowSemester = function() {
            $scope.insertsem = {
                //id = $scope.getSemester.length+1;
                StartDate : "1",
                EndDate : "1",
                Amount : "1",
                SemesterName : "1",
                TotalScore : "1",
                Subject : []
            }

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

Retrieving the value of an inner div upon clicking the outer div

I currently have a collection of button divs, each containing distinct information: <div class="button"> <div id="first"> Johny </div> <div id="second"> Dog </div> <div id="third"> Pasta & ...

Click on the link to open it in a SharePoint modal and populate it with the value from the

After populating a ng-grid with SharePoint items, my goal is to have the SharePoint edit form open in a modal window when the edit button at the end of each row is clicked. However, I am encountering difficulties when using OpenPopUpPage as the {{row.entit ...

Tips for properly handling Chinese characters in PowerShell when using ConvertTo-Json

I'm currently working with ConvertTo-Json in PowerShell. By default, ConvertTo-Json will escape special characters, but it does not escape Chinese characters. For instance: "<>中文ABC" | ConvertTo-Json The resulting output is "\u003c&bs ...

Unable to render canvas element

Hey guys, I'm trying to display a red ball on the frame using this function but it's not working. I watched a tutorial and followed the steps exactly, but I can't seem to figure out what's wrong. Can someone please help me with this? I ...

Creating automatic page additions using Node.js on Heroku?

Can you assist me with a challenge I'm facing? Currently, I am using node.js and heroku to deploy an application and each time I add a new post, I have to manually update my web.js file. This process was manageable when I had fewer pages, but now it&a ...

What is the best way to create a JavaScript "input" field that only accepts vowel letters?

Is there a way to create an "input" field that only accepts vowel letters? Additionally, I want to ensure that copying and dragging text into the input field will also be filtered out. <div class="field"> <input class="fie ...

Attempting to modify the state within a nested object located in an array by using json data

My objective is to retrieve data from the Google Books API, which returns JSON data in a similar format to what my state displays. I aim to update the title with the title string provided by the JSON data. Currently, I am encountering a "failed to compile" ...

405 error: NGINX blocking POST method in Django DRF Vue.js application

I have encountered a strange issue while building my ecommerce site. Everything seems to be working fine, except for the forms. When attempting to post content, I keep receiving a 405 method get not allowed error. It's confusing as I am trying to use ...

Issue with activation of onClick event in case/switch statement

Currently working on a JavaScript project to recreate the Fallout terminal game, with one of the main aspects being comparing words selected by the user to those chosen by the computer. The concept of this hacking game is reminiscent of the board game Mas ...

Trouble with Material-UI Textfield Hinttext Functionality

When designing a textfield according to job requirements, I encountered an issue. After assigning a background color to the TextField, the hintText disappeared. To resolve this, I had to manually set the z-index of the label. Now, the hintText is visible, ...

Updating Cart Array in Angular 4 when Adding a New Item

I'm currently using angular 4 and I have encountered an issue in the code where adding a new product to the cart overwrites the existing item instead of appending it to the array. Here is a screenshot illustrating the problem cart.service.ts export ...

Using the Tailwind CSS framework in combination with Vue's v-html

My vue component is designed to accept a prop of raw HTML, which originates from a wysiwyg editor utilizing tailwind classes for styling - similar to our vue app. The issue arises when using v-html="responseFromAPI" in my component, as the raw H ...

Modifying the color of a div based on a specified value using JavaScript

<div id="navigation"> Add your text here </div> <input type="text" id="newColor"><button onclick="modifyColor()">Update</button> <script> function modifyColor(){ var chosenColor = document.getElementB ...

Shifting a division using insertAfter

Hey there! I'm having a bit of trouble using the insertAfter function. In each product in my store, I need to position an "add to cart" button after the price. This is the code I tried: <Script type="text/javascript" > jQuery(document).read ...

What causes the Vue.http configuration for vue-resource to be disregarded?

I am currently utilizing Vue.js 2.3.3, Vue Resource 1.3.3, and Vue Router 2.5.3 in my project while trying to configure Vue-Auth. Unfortunately, I keep encountering a console error message that reads auth.js?b7de:487 Error (@websanova/vue-auth): vue-resour ...

A guide to efficiently passing props in Quasar 2 Vue 3 Composition API for tables

I am encountering an issue while attempting to create a custom child component with props as row data. The error message "rows.slice is not a function" keeps appearing, and upon inspecting the parent data, I found that it is an Object. However, the props r ...

Jolt Shift for adding extracted information

I have recently started using Jolt Transform and I am looking to transform some EDI data. My goal is to retain the original data while adding a few extracted elements to simplify the downstream process. Here's an example: Input { "id": &q ...

What is the best way to showcase arrays in a JSON document?

I'm working on a basic AJAX code to show a JSON file stored locally using this HTML, but I keep getting an 'undefined' error. I'm opting for JavaScript instead of JQuery since I haven't delved into it yet; hoping my code is syntact ...

Reactjs may have an undefined value for Object

I have already searched for the solution to this question on stackoverflow, but I am still confused. I tried using the same answer they provided but I am still getting an error. Can someone please help me resolve this issue? Thank you. const typeValue = [ ...

Configuring Firefox settings in Nightwatch

Is there a way to set Firefox preferences in nightwatch? I am trying to achieve the same thing in Java using nightwatch. To set Firefox preferences in nightwatch, you can use the following code snippet: FirefoxProfile profile = new FirefoxProfile(); prof ...