Deleting a JSON object in Angular

I am facing a challenge with my file (courses.json) as I am trying to figure out how to remove courses by clicking on the 'x' next to the course name. Being new to this, I have been struggling to make it work. While I can successfully read from the file, nothing happens when I click on the 'x'. Any assistance in solving this issue would be greatly appreciated!

Below is the snippet of code I have been working with:

var app = angular.module('myApp', []);
app.controller('courses', function($scope, $http) {
    $http.get("courses.json").success(function(data) {
        $scope.courses = data.kurser;
    });
});

function courses($scope, courses) {
    $scope.deleteItem = function (key) {
        delete $scope.courses[key];
    }
}

Here is the HTML part of the code:

<div ng-app="myApp">
    <ul ng-controller="courses">
        <li ng-repeat="(key, value) in courses" id="course-{{value.courseId}}">
            <a href="#" class="courseIcon">{{value.courseName}}</a>  <a ng-click="deleteItem(key)">x</a>
        </li>
    </ul>
</div>

Answer №1

If you want your courses function to be properly linked to the application, make sure to define the deleteItem method within the same controller where you are loading the data:

app.controller('courses', function($scope, $http) {
    $http.get("courses.json").success(function(data) {
        $scope.courses = data.kurser;
    });

    $scope.deleteItem = function (key) {
        delete $scope.courses[key];
    }
});

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

Dealing with issues of toggling visibility with jQuery when using a dropdown menu

Inside a hidden drop down div, the focus is on "DC" right now. In the image below, we are looking at sales: HTML: <td class="edit"> <select class="touch" style="display: none;"> <option value="11">Rebuying</option><option value ...

Issues with the Diagonal HTML Map functionality

I'm seeking assistance to implement a unique Google Maps Map on my webpage. I have a particular vision in mind - a diagonal map (as pictured below). My initial approach was to create a div, skew it with CSS, place the map inside, and then skew the ma ...

jquery after() reset

Is it possible to refresh or modify an after() element without appending additional text through another after() function? Your assistance is greatly appreciated. ...

Tips on inserting text into form input fields

I need some guidance on how to enhance my form input functionality. The form currently consists of an input box and a submit button. When the user clicks submit, the form content is submitted and processed using javascript. What I am aiming for is to autom ...

Is there a way to adjust the orientation of an object in WebGL using the THREE.js library by utilizing its position as a reference

I'm currently working on a Rubik's cube project in WebGL. I have successfully created 27 small cubes that come together to form one large cube. However, I am struggling with how to rotate specific groups of cubes based on their position rather th ...

There seems to be a glitch preventing the Redis client from properly executing

Having some trouble with my Redis implementation in Node.js. Despite using async/await as recommended in the docs, I'm only seeing 'console log 1' being logged. Any ideas on what might be causing this issue? Any help or suggestions would be ...

Eliminate elements from an array (Using Restkit framework with JSON retrieved from an API)

I am working with an array called leafs and I need to remove certain objects from it. The array contains approximately 50 objects, but I only require around 10 of them; these 10 desired objects are randomly scattered among the 50 in the array. I'm u ...

Delete the form tag from the extracted HTML content of the remote page requested through an AJAX call

I am trying to retrieve the HTML content from a remote aspx page and display it on another page using an ajax request. I need to strip out the form tag from the remote page HTML and also ensure that any scripts included on the remote page are executed. Re ...

How to ensure that two MongoDB collections share the same object ID

Transitioning into the world of MongoDB has raised some questions for me about objectIDs. I recently imported two json files into my database - one containing information on animals and the other detailing owner information such as name, location, and phon ...

Difficulty in sharing cookies among subdomains

I have successfully stored my visitors' style sheet preference in a cookie, but I am facing an issue with sharing the cookie across subdomains. Even after specifying the domain, the cookie does not seem to be shared. What could be causing this proble ...

Attributes requested with jQuery JavaScript Library

Is there a way to dynamically add extra key-value pairs to the query string for all requests sent to the web server? Whether it's through direct href links, Ajax get post calls or any other method, is there a generic client-side handler that can handl ...

The error message "Uncaught TypeError: Cannot set property 'map' of undefined" occurs when using the callback function to load a texture with Three.js TextureLoader

Currently working with Three.js and aiming to refactor the code. I am looking to create a dedicated class called "Floor" for generating floors: import { Mesh, MeshBasicMaterial, PlaneGeometry, RepeatWrapping, sRG ...

JSON loading error detected in the system's background operation

I created a JSON loader class to load JSON objects from a URL. However, when I run it, I encounter some system errors in the logcat. Surprisingly, the application does not force close despite these errors. I am unsure about where I went wrong. Additionally ...

The firebaseui.js code encountered an error because it was unable to read the property 'call' as it was undefined

Currently, I am facing an issue while trying to implement Firebase ui auth in my app by referring to Google's Github documentation. While the email sign-in functionality is working smoothly, I am encountering problems with the phone sign-in option. ...

Steps to access the Link URL when the class name transforms to display as block:

I'm currently working on a function that needs to trigger a click on a link only if a specific classname is set to display: block; Unfortunately, my coding skills are not advanced enough to accomplish this task. Here is what I have so far: https://j ...

Understanding the functionality of $q in AngularJS

Can someone help explain how $q functions in Angular? Let's say I have a few lines of code that need to be executed. var app = angular.module('app', []); app.controller('HelloCtrl', function ($q, $scope) { $scope.Title = "Pr ...

Utilize buttons to send data to a PHP script

Currently, I am in the process of developing a control panel for an application, consisting of an array of buttons. My aim is to relay information about the specific button pressed to the designated script responsible for executing commands. However, I am ...

Refresh your webpage automatically without the need to manually refresh after clicking a button using AJAX in HTML and PHP!

One issue I'm facing is that the page doesn't auto-refresh, although it loads when I manually refresh it. Below you can find my HTML and AJAX code along with its database details. The Trigger Button <?php $data = mysqli_ ...

Having trouble displaying a List Object: AttributeError: 'list' object does not have the specified attribute

My goal is to display JSON data using the code snippet return {'category_name': category.category_name} in a views.py file. I am working with the Pyramid Web Framework and implementing a custom RESTful web api along with a CRUD design in an SQLAL ...

Chrome displaying an extJs Button image

Could it be that Chrome is evolving into the new IE in terms of CSS issues? Here is the code I have for creating ExtJS buttons within an accordion: var button = Ext.create('Ext.Button', { text: '<img src="'+resp.sellers.externa ...