Guide to setting properties and printing objects in AngularJS

I'm curious about how to print and assign the object below, which includes an array as a property:

var professions = [
  {
    title: "Engineering",
    classes: [
      "Engineering Basics",
      "Advanced Engineering"
     ]
  },

Answer №1

If discussing angular, you can use the following code snippet:

angular.forEach(jobs, function(job) { // performs null checks internally
    console.log(job); // Output job value.
    job.title = "Developer" // Update Value - reference gets updated
    angular.forEach(job.tasks, function(task) {
        console.log(task); // Output task value.
        task.push("Coding") // Update Value
    });
});

Answer №2

If you want to achieve this:

for(var i =0; i < carreers.length; i++){
     console.log(carreers[i].name);
     console.log(carreers[i].courses);
     for(var j =0; j < carreers[i].courses.length; j++){
         console.log(' - ' + carreers[i].courses[j]);
      }
}

To implement it in Angular:

<div ng-repeat="data in carreers">
     <p>{{data.name}}</p>
     <div ng-repeat="course in data.courses">
         <p> - {{course}}</p>
     </div>
</div>

To add a course to a specific career:

carreers[0].courses.push("Law III");

To display courses for a selected career:

<select id="courses" ng-model="career">
   <option ng-repeat="career in data" value="{$index}">{career.name}</option>
</select>

<div ng-repeat="course in data[career].courses">{course}</div>

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

Updating Button Color for Individual Button in ngRepeat Generated Button Array

I am having trouble using ngRepeat to generate four buttons. My goal is to change the color of a button and execute a function every time it is clicked (currently just using console.log). Additionally, I want the previously clicked button to revert back to ...

Ways to ensure that the form data stays consistent and visible to the user continuously

Is there a way to ensure that the user submits the form, stores it in a MYSQL database, and then displays the same submitted data in the form field? <div class="form-group"> <label class="control-label col-sm-2" for="lname">Last Name*</l ...

How can I align the selected option to the left in a CSS/jQuery selectbox?

I've been struggling to get the selected option aligned left like the other dropdown options. Even though I've added 'text-align:left;' in every CSS option, it's not working. I suspect that the JavaScript code is affecting the al ...

tips for decreasing box size diagonally while scrolling down

$(function(){ var navIsBig = true; var $nav = $('#header_nav'); $(document).scroll( function() { var value = $(this).scrollTop(); if ( value > 50 && navIsBig ){ $nav.animate({height:45},"medium"); $('.box ...

Creating a backup link for a video player component in NextJs

My aim is to make sure that two video player components in a NextJS application can still access and play videos even when the application is running locally using npm run dev without an internet connection. Currently, these two components.. <HoverVi ...

Guidelines for accessing a specific object or index from a dropdown list filled with objects stored in an array

Here is a question for beginners. Please be kind. I have created a select field in an HTML component using Angular, populated from an array of objects. My goal is to retrieve the selection using a method. However, I am facing an issue where I cannot use ...

Using TypeScript for Immutable.js Record.set Type Validation

Currently, I'm utilizing Immutable.js alongside TypeScript for the development of a Redux application. In essence, the structure of my State object is as follows: const defaultState = { booleanValue: true, numberValue: 0, } const StateRecord = ...

Create an HTTP service using promises in AngularJS

Upon accessing a specific page of the application via its URL, I aim to verify whether the page can be loaded by making an API call. If allowed, the page should load; otherwise, it should redirect to a different page within the application. To achieve th ...

angularjs: hide div based on text entered in textfield

Is there a way to hide a div (with the class "card") until the user inputs text into the textfield in an AngularJS application? I believe the solution involves using ng-show, but I'm unsure of how to implement this functionality. Any assistance would ...

Transferring data between Javascript and PHP with AJAX and JQuery

I'm currently working on a basic web page that involves sending data from an HTML page to a PHP script and receiving some data back. My approach involves using AJAX, but for some reason, the PHP script doesn't seem to execute at all. Here's ...

Guide to extracting a specific segment from req.body in Node.js

I've been attempting to access a specific nested property of req.body, but the output always turns out to be undefined. Here is the code snippet: let dataReceived = JSON.stringify(req.body); console.log(dataReceived); let refCode = ...

Building an interactive grid using AngularJS

As a newcomer to angularjs, I am aiming to create a grid of 12*12. I managed to achieve this using the following methods - 1. Employ nested for loops and add elements to the parent div accordingly. 2. Develop a static grid. Unfortunately, neither of thes ...

Various instances of controllers in Angular.js and JavaScript

I'm facing a challenge with a view that has two identical parts but different content. I want to find a way to use one controller and one view for both the left and right parts. Here's what I currently have in my HTML: <div class="board_bod ...

Vue Component Unit Testing: Resolving "Unexpected Identifier" Error in Jest Setup

Having just started using Jest, I wanted to run a simple unit test to make sure everything was set up correctly. However, I encountered numerous errors during compilation while troubleshooting the issues. When running the test suite, Jest successfully loc ...

How can the color of a button be changed when a checkbox is clicked?

Is there a way to modify the color of a button when clicked? Once the user has filled in all the fields and checked the checkbox, the button's color should change. new Vue({ el: '#app', data() { return { terms: false, ...

Incorporate Node.js seamlessly into your WordPress website for enhanced functionality

Seeking Assistance I am relatively new to javascript, but I have successfully created a flight search single page application using nodejs, angularjs, and the Skyscanner API. Now, my goal is to integrate this application as an embedded website within a W ...

Javascript and Codeigniter interaction: Using conditionals with Ajax

I am having trouble understanding this code snippet. I am currently studying Ajax and came across this piece of code that automatically inserts data. However, I am unsure about the line if(result=='12') then trigger ajax. What does the number 12 ...

Remove the column lines when hovering over a table to change the border color

I'm striving to update this table in a way that conceals the lines above the hovered point within that column. For instance, if the bottom middle box is hovered, three lines above it will be visible. My goal is to prevent those lines from being displa ...

Error encountered while trying to access the user information from Firestore/Firebase

When I attempt to display the current user that is logged in console.log(firebase.auth().currentUser.uid) The user's UID is outputted. I then decided to retrieve the current user's information from Firestore using the following code: import ...

What is the easiest method to iterate through nested objects within an object?

Hey there! I'm working on implementing a "your cart" feature for an ecommerce website in my project, and I could use some assistance with coding to loop through an object within an object. Below is the code snippet I've been working on: ...