Incorporate an array into a JSON object using AngularJS

I'm attempting to append a JSON array to a JSON object. Here's my code:

$scope.packageElement = {
    "settings": [
        {
            "showNextPallet": true,
            "isParcelData": false,
            "isFreightData": true,
            "name": 0
        }
    ]
};

dataFromServer = {
    "pData": [
        {
            "PKUNIT": "LP",
            "PKDESC": "LARGE PKG",
            "PKDLEN": 30,
            "PKDWDT": 20,
            "PKDHTG": 20
        }
    ]
};

$scope.packageElement.concat(dataFromServer.pData);

However, this is resulting in an error:

TypeError: undefined is not a function

at this line of code:

$scope.packageElement.concat(dataFromServer.pData);

This is the output I want to achieve:

var expectedOutPut = {
    "settings": [
        {
            "showNextPallet": true,
            "isParcelData": false,
            "isFreightData": true,
            "name": 0
        }
    ], "pData": [
        {
            "PKUNIT": "LP",
            "PKDESC": "LARGE PKG",
            "PKDLEN": 30,
            "PKDWDT": 20,
            "PKDHTG": 20
        }
    ]
};

Could someone please assist me in identifying where I am going wrong in my implementation?

javascriptjsonangularjs

Answer №1

Here's a simple solution:

$scope.packageElement.pData = dataFromServer.pData;

The $scope.packageElement object does not have a concat function.

Alternatively, you can use angular.extend():

var expectedOutPut = angular.extend({}, $scope.packageElement, {'pData': dataFromServer.pData});

By doing this, you will create copies of the objects instead of modifying them.
Please note that angular.extend does not support deep copy for recursive merges.

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

Echarts - Interactive line graph showcasing real-time data from Json source

Currently, my goal is to create a timeline chart with multiple lines where the number of lines varies based on the JSON data provided. The JSON data I am receiving is outlined below. I aim to plot each line for every product. How can I manipulate the dat ...

jsonlinechartecharts

Creating interactive HTML buttons using JavaScript to trigger AJAX requests

My current task involves populating an HTML table to showcase users. By making API calls to retrieve user data, I utilize Javascript to add rows to the table. Each row ends with a delete button, intended to trigger a $put request to a separate API endpoint ...

javascriptjqueryhtmlajax

Error: Cannot convert a value of type java.lang.String to a JSONObject in JavaJSONException

I just started exploring android development and stumbled upon an app that would complement the web scraper I've been diligently working on. This app fetches information from a MySQL database using a PHP script and presents it on your android device. ...

javaphpandroidjsonpdo

"How to ensure consistent styling for all buttons, including dynamically created ones, in an application by utilizing the jQuery button widget without the need for repetitive calls to

Hello everyone, I am a newcomer to stack overflow and I have a question to ask. Please excuse any errors in my query. I have searched for an answer but have not been successful in finding one so far. Let's say I have a webpage where I am using the jQ ...

javascriptjqueryasp.net-mvcjquery-uijquery-ui-button

Struggling to reset the jscrollpane scroller

When using jscrollpane in my horizontal division to enable scrolling, I encounter an issue when loading data with ajax. The scrollbar doesn't appear until the browser width is changed. To address this, I currently utilize the following method to rein ...

javascriptajax

Are you prepared for changing DropDowns?

To ensure users make a selection from a specific dropdown menu, I have implemented the following code to trigger an alert if they fail to do so: <script> function checkSelection(){ var sel = document.getElementById(' ...

javascriptjquery

Is it possible to submit a HTML5 form and have it displayed again on the same page?

Is it possible to simply reload the sidebar of a page containing an HTML5 form upon submission, or is it necessary to load a duplicate page with only the sidebar changed? I am unsure of how to tackle this situation; firstly, if it is achievable in this m ...

javascriptjqueryhtmlforms

Unlocking the potential of arrays

Having trouble retrieving a specific value from an array element. I need to extract the "logo" value, which should be "Logo Google 2013 Official.svg" in this scenario. Any assistance would be highly appreciated. <html> <head> </head> < ...

phpjson

Utilizing the content of an HTML element within Ruby embedded code - a comprehensive guide

Below is the code snippet in question: <% @groups.each do |group| %> <tr> <td id="groupid"><%= group.id %></td> <td><a href="#dialog" name="modal"><%= group.title %></a></td> </tr> &l ...

javascriptjqueryhtmlruby-on-railsruby

Javascript function fails to trigger when clicked

<body ng-app="starter"> <ion-pane> <ion-header-bar class="bar-dark"> <h1 class="title">AppifyLife</h1> </ion-header-bar> <ion-content> <center><div class="card" id="life"><h3>20< ...

javascriptjqueryhtmlfunctiononclick

The custom filter in AngularJS fails to activate when a click event occurs

I am trying to customize the filtering of my table data based on selected conditions from a dropdown menu. I have created an AngularJS custom filter and passed all the necessary parameters. The desired functionality is that if no conditions are selected, ...

javascriptangularjs

Using jQuery to load data into a combo box from a JSON file

Ensure that the list of countries is stored in the countries.json file. When attempting to load the countries into the combo box from the json file, no results are being displayed. Here are the details of the code. The countries should be visible in the co ...

jqueryjson

Using single quotation marks within a string can cause issues in javascript

I am curious about how to handle single quote marks and other symbols within user-generated text without causing issues with the JavaScript code. Currently, if a user enters a title like "I wouldn't", it breaks the JavaScript functionality. <a cl ...

javascriptphp

How can the .pre() middleware function in Mongoose be utilized?

I'm curious about the use cases for mongoose .pre('validate') and .pre('save'). I understand their functionality, but I'm struggling to think of specific scenarios where I would need to utilize them. Can't all necessary a ...

javascriptmongodbexpressmongoose

Issues with Ajax.BeginForm causing JSON to be returned as undefined (Confirmed by Dev Tools)

I'm facing a strange issue while attempting to retrieve a basic JSON object from my controller. Although I can see the JSON returned perfectly fine in Firefox debug tools, when I look at my javascript callback, I receive an undefined in my console.log ...

jqueryajaxjsonasp.net-mvc

"Encountering a strange issue where submitting a form with Jquery and AJAX in Rails does not work as expected, causing the index

Currently facing a unique issue with a jQuery/Ajax HTML update form. The application in question is a single-page TODO App that utilizes a Rails controller, where all changes to the DOM are made through jQuery/Ajax. After rendering the TODOs on the page v ...

javascriptjqueryruby-on-railsajaxforms

The error encountered is: "TypeError: req.flash does not exist as a function in NodeJs

When it comes to working with Registration on a Site, the Validation process is key. In this case, mongoose models are being used for validation and an attempt is being made to utilize Flash to showcase error messages within the Form. However, there seems ...

javascriptnode.jsexpressnpm

Is it recommended to incorporate router.isReady when making requests with react-query?

Struggling with incorporating react-query into my codebase, currently using getStaticProps. Experimenting with router.isReady from next/router to ensure the page waits for router.query value before passing it as props to the react hook. Take a look at my ...

javascriptreactjsgoogle-cloud-firestorenext.jsreact-query

Transfer the script from package.json to an npm package

In each of our plugins' root directories, there is a file named tools.js. This file contains a build function that assists in creating builds for the plugin. The package.json file references it like this: "scripts": { "build:node&qu ...

javascriptnode.jsnpm

Universal PM2 Configuration Settings in JSON Format

My current process involves initiating numerous Node.js processes using pm2. These processes are configured in a JSON file and started by executing pm2 start pm2.json Upon examining the JSON file provided below, it's evident that there is significan ...

javascriptnode.jsnpmnode-modulespm2