Expanding a JSON object in AngularJS: Step-by-step guide

I have an object called

$scope.releases = [{name: "All Stage", active: true}];

Now I want to add more data to it:

[
  {name: "Development", active: false},
  {name: "Production", active: false},
  {name: "Staging", active: false}
]

The final data structure should look like this:

[
   {name: "All Stage", active: true},
   {name: "Development", active: false},
   {name: "Production", active: false},
   {name: "Staging", active: false}
]

I attempted the following code, but it doesn't seem to append the new data properly:

app.controller('MainCtrl', function($scope) {
  // Initial object
  $scope.releases = [{name: "All Stage", active: true}];
  
  // Adding more data
  $scope.releases = [
    {name: "Development", active: false},
    {name: "Production", active: false},
    {name: "Staging", active: false}
  ]
});

Plunker Link: http://plnkr.co/edit/gist:3510140

Answer №1

  $scope.releases = [{name : "All Stage",active:true}];
  // Merge the new array with the existing one
  $scope.releases = $scope.releases.concat([
    {name : "Development",active:false},
    {name : "Production",active:false},
    {name : "Staging",active:false}
  ]);

Answer №2

To combine arrays in JavaScript, simply utilize the Array concat method

$scope.stage = [{name : "All Stage",active:true}];
$scope.stages = [
    {name : "Development",active:false},
    {name : "Production",active:false},
    {name : "Staging",active:false}
];
$scope.stages = $scope.stages.concat($scope.stage);

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 is causing the 'Invalid Hook Call' error to appear in React?

I have recently started learning React and I am currently working on converting a functional component into a class component. However, I encountered an error message that says: Error: Invalid hook call. Hooks can only be called inside of the body of a fu ...

jspdf generates blank PDF files

I am trying to use JsPDF to generate a PDF from content within a Section tag. I have followed various guides but none of them seem to be working for me. Since there is no demo code available, I am turning to this platform in hopes of finding a solution. A ...

Dealing with nested JSON structures in Python

I'm currently working on extracting data from a nested JSON structure using Python. Here's a brief example of the JSON data: { "daily" : { "1524182400000" : 438, "1524268800000" : 438, "1524355200000" : 437, ...

Error in jQuery animation on Bootstramp template

For my website, I utilized a template that can be found here: http://www.bootply.com/100702. However, the animated menu is experiencing issues such as being buggy and laggy when clicking on menu options. Upon clicking on the link provided, the page blinks ...

Display HTML components as JSON data using AngularJS

Recently, I started exploring angular js and faced a challenge in formatting json data with the help of angular js. Below is a snippet of my json data: [ {"field_add_link": "<a href=\"/drupal3/drupal3/\">Home</a>"}, {"field ...

Retrieving multiple lines of text from the database and populating a TextArea

I am encountering an issue with multi line text saved in a MySql database as VARCHAR 255. When I retrieve and process it using the nl2br PHP function, it displays correctly (with multiple lines). However, when I retrieve the multi line text from the databa ...

Is it possible to retrieve the entire JSON data using JSONPath?

I need help using JSONPath in my project. How can I extract the entire JSON exactly as it is? This is my JSON data: [{"data":"xxx#12#1","id":"7_0_0"}, {"data":"xxx#12#1","id":"8_0_1"}, {"data":"xxx#12#1","id":"9_1_0"}, {"data":"xxx#12#1","id":"10_1_1" ...

Tips for dragging and dropping a file attachment directly into your web browser

Google has recently introduced this feature to Gmail, and it doesn't need you to download any additional plugins. This feature is compatible with both Firefox and Chrome browsers, but unfortunately not with Internet Explorer. ...

Secure user verification using session variable in the Express framework with NodeJs

Is it safe to use session variables for login persistence in the backend? What are the security implications and alternatives to consider? Technology Stack: Express (NodeJs) on the backend, MaterialUI (React) on the frontend I am seeking a straightforwa ...

Creating personalized functions in Object.prototype using TypeScript

My current situation involves the following code snippet: Object.prototype.custom = function() { return this } Everything runs smoothly in JavaScript, however when I transfer it to TypeScript, an error surfaces: Property 'custom' does not ex ...

Tips for avoiding divs from overlapping when the window size is modified

When I maximize the browser, everything aligns perfectly as planned. However, resizing the window causes my divs to overlap. Despite trying several similar posts on this issue without success, I have decided to share my own code. CODE: $(document).read ...

The appearance of responsive CSS is altered when deployed compared to when it is viewed on the

I'm a beginner in web development and facing an issue with my mobile CSS. The strange thing is that when I view it on localhost, everything looks great, but once deployed (tried both Heroku and GitHub), it appears distorted. Even when I make extreme c ...

Node.js in action with XmlHttpRequest

I'm having trouble making an XMLHttpRequest call from my client-side JavaScript to my Node server. It seems like nothing is happening and I'm a bit new to this concept. Here's the JavaScript function I've written: function sendTokenToS ...

I encounter an endless $digest Loop problem when integrating cfpLoadingBar with '$viewContentLoaded' and '$stateChangeStart'

Implementing the code below will result in an Infinite $digest Loop: $scope.$on '$viewContentLoaded', -> cfpLoadingBar.complete() $scope.$on '$stateChangeStart', -> cfpLoadingBar.start() How can we correctly trigger the ...

Can you show me the method to retrieve the value of client.query in Node JS using PG?

I have been working with node.js to establish a database connection with postgresql. Here is what my dbConfig.js file looks like: var pg = require('pg'); var client = new pg.Client({ host:'myhoost', port:'5432', ...

Placing a list item at the beginning of an unordered list in EJS with MongoDB and Node.js using Express

What I've done: I already have knowledge on how to add an LI to UL, but it always goes to the bottom. What I'm trying to achieve: Add an LI to the top so that when my div.todos-wrapper (which has y-oveflow: hidden) hides overflow, the todos you a ...

VSCode API alerts user when a rejected promise is left unhandled for more than a second

After working diligently on developing my first vscode extension, I encountered a roadblock when the debugger halted the execution of my extension. As a newcomer to JavaScript, I suspect that I may be overlooking something related to "thenables" that is c ...

Is it possible to have an object nested within a function? How about a function within a function? I'm determined to grasp

0 Can someone explain to me how the function express() works? I'm having trouble understanding how you can call a function when stored in a variable like const app = express(); Then calling a function like listen() as if it were an object: app.list ...

Having trouble with control flow in Node.js and Mongoose?

Recently, I've dived into exploring node.js and have some familiarity with JavaScript, although my experience in server-side programming is quite minimal. The situation at hand involves the code below where I aim to add a product to the collection us ...

Overriding the Ajax URL

During an AJAX request in a Rails app triggered by onchange event, I am encountering an issue with the URL being called. The function for the request is a simple PUT operation: function quantityChange(id, val) { $.ajax({ url: 'cart_items/ ...