• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Black Friday Deals
  • Topics
  • Reviews
  • Services
WittySparks / Technology / Programming / Avoid empty and duplicate records to get pushed in AngularJS

Avoid empty and duplicate records to get pushed in AngularJS

Updated: November 14, 2023 by Sravan K • 2 min read

AngularJS Framework from Google

I am back again with a basic example on AngularJS on how to display the data from a set or array or JSON array, and how to add or insert or append data in an existing JSON array, and at the same time, how could we avoid empty data or duplicate records to get pushed into the JSON array.

This time I am back with Screencast Video tutorials or presentation whatever you call it is, and this is my first screen-cast video presentation too and that too in AngularJS; going forward, I will try to improve my voice and presentation skills, which will help me and you to get some online tutorials going forward.

Since this is my first video, I expect your valuable feedback on where I have to improve myself – which will help me grow further for a better presentation next time. I appreciate your feedback.

Ok – let me come back to this basic AngularJS tutorial; in this tutorial, you can see how to use the ngRepeat directive, forEach global API, and, while inserting data, how to avoid duplicate or empty data to get a push into the JSON array.

Here is the screen-cast video, which explains you well in detail in case you are a starter in AngularJS or about to learn AngularJS:

Demo | Download

JavaScript Code:

          var wittyApp = angular.module('wittyApp',[]);
          function AvoidDuplicateEntries($scope){
          $scope.movies = [
          {moviename: 'SuperMan'},
          {moviename: 'SpiderMan'},
          {moviename: 'BatMan'}
          ];
          var someMovie = $scope.movies;
          $scope.addMovie = function (){
          var newMovie = $scope.moviename;
          var oldmovies;
          if(newMovie){ //This will avoid empty data
          angular.forEach($scope.movies, function(eachmovie){ //For loop
          if(newMovie.toLowerCase() == eachmovie.moviename.toLowerCase()){ // this line will check whether the data is existing or not
          oldmovies = true;
          }
          });
          if(!oldmovies){
          someMovie.push({moviename:newMovie});
          }
          }
          }
          }

HTML Code:

<div style="padding:20px" ng-app="wittyApp" id="ng-app" ng-controller="AvoidDuplicateEntries">
<h1>Basic App using AngularJS</h1>
<table class="table table-bordered" style="width:220px;">
<thead>
<tr><td>#</td>
<td>Movie Name</td></tr>
</thead>
<tr ng-repeat='movie in movies'>
<td>{{$index+1}}</td>
<td>{{movie.moviename}}</td>
</tr>
</table>
<form ng-submit="addMovie();">
<input type="text" ng-model="moviename" size="30" placeholder="Which movie you want to watch" /><br />
<input type="submit" class="btn btn-primary" value="Add Movie">
</form>
</div>

Liked it? Appreciate your feedback about my first video and first example on AngularJS :)
More to come – keep visiting us!

Related Topics

  • PHP: Is it the best Programming Language ever?
  • How To Build A Great Search Box On Your Website
  • How to make Python3 version default in Windows OS?
  • Latest Java Technologies & Trends for 2020

Topic: Programming

Profile picture for Sravan K Article by

Sravan K

Contributor at WittySparks
WittySparks Staff

Sravan is a Web enthusiast, who keeps on eye on all the latest happenings on web from AI to Web3, etc.

View all posts by Sravan K

Primary Sidebar

Weekly Newsletter

Featured Productivity Software

Notion logo
Notion

Notion Workspace can help you stay organized and take your productivity to the next level. Use Skillshare coupon code WITTYSPARKSFREE to watch the Notion Masterclass by Ali Abdaal for FREE.

Take Free Notion Masterclass

The Best Digital Marketing Tool

Semrush logo
Semrush

Semrush helps grow your business on your terms and gets to the top with 55+ marketing tools in 1. Get a flat 40% discount on Guru plan or Try 14-day PRO Trial.

Try Semrush for FREE
Grow your Instagram that is algorithm proofGrow your Instagram that is algorithm proof - Foundr

Footer

Explore Topics

  • Technology
  • Business
  • Marketing
  • SEO
  • View All Topics

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Affiliate Link Disclosure

If you make a purchase from links, we will receive a small commission. See our Affiliate Disclosure.

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS
  • Mastodon

Copyright © 2023 WittySparks - All rights reserved.
Hosted on Rocket.net

  • About Us
  • Contact Us
  • Privacy Policy