JavaScript Tutorial: Learn JavaScript For Free | Atcodex

Remove multiple elements from an array in Javascript/jQuery

atcodex — Mon, 28 Sep 2020 17:31:11 +0000

In this post, we will learn how to Remove multiple elements from an array using Javascript or jQuery give with an example. We can simply remove elements from an array using javascript. Below in the post, we have tried different methods to do the same.

Let’s suppose we have an array in which and we want to remove some particular element from the array without refreshing the page. In that case, we have to use javascript and jquery to remove the element from the array. Because if we go for server-side language then we have to refresh the page or need to get done the same thing with the help of AJAX and backend language. Which is a kind of long and boring task to do. We can simply use javascript, jquery, and some of the other javascript libraries to do it.

Following are the some example we are providing to make you understand about the topic.

Remove element using Vanilla JavaScript

In first, let’s remove the element using simple javascript and jquery, In this, we will use Array.prototype.remove, grep() and inArray() to remove multiple as well as the duplicate value from the array in jquery. However, you can check How to remove duplicate values from an array in PHP




   Jquery Remove Multiple Values from Array Example

Output

Remove element using Using Lodash

To remove an element, we can use an external javascript library called Lodash. Lodash has the remove() method which is very easy to use. All other methods in the Lodash are very easy to use and helpful which can done job for you in a second. You do not need to break the array and manipulate for getting some work done in javascript. It have very helpful built in methods which you can use in any situation in the programming.

In the below code we are just passing the array in _.remove() and in which we have defined callback function when passed argument is == to 3.

NOTE : It make the changes in the existing array value.

var arr = [1, 2, 3, 3, 4, 5];
_.remove(arr, function(e) {
    return e === 3;
});
console.log(arr);

// Output:
// [ 1, 2, 4, 5 ]

Remove element using Using Underscore

We can use Underscore library to solve the same problem. It has _.reject method which is same like _.remove() method in the Lodash. It works similarly like Lodash with some difference which is : it returns the new array after removing the passed value in the array. Old array value remains same.

See the following code for an example:

var arr = [1, 2, 3, 3, 4, 5];
var ret = _.reject(arr, function(e) {
    return e === 3;
});
console.log(arr);
console.log(ret);

// Output:
// [ 1, 2, 3, 3, 4, 5 ]
// [ 1, 2, 4, 5 ]

Conclusion

We have explained 3 different method and by using them you can remove the one or more elements from the array in simple way. I hope you guys have liked the post, if you have any suggestion please comment below., i would love to help you.

The post Remove multiple elements from an array in Javascript/jQuery appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.

How to access PHP variables in JavaScript or jQuery

atcodex — Sat, 19 Sep 2020 13:47:27 +0000

Sometimes we need to access the PHP variables in javascript or jquery for the use in the application. In this article, let’s see how to pass data and variables from PHP to JavaScript.

If you have a simple string value in PHP and you want to access that value in javascript or jquery then you have two options to do so.

First, we can pass the data through cookies. In cookies, we can set the data in using PHP cookies and then access that cookies data in JavaScript and jquery.

In the second method, we can simply access the PHP value direct in the JavaScript variable. You only need to initialize the variable in javascript and access the PHP value with all open and close PHP tag inside the Single Quotation mark (”).

Let’s see how we can pass the PHP variable to JavaScript.

Pass PHP variables in JavaScript or jQuery

You can simply check we just defined the value in PHP and then access that variable direct in the JavaScript.

Pass a PHP array to a JavaScript function

We can easily pass the PHP array to JavaScript, Only need to convert the PHP array to JSON using json_encode function and that can be accessed in the JavaScript.

Pass Multidimensional Arrays from PHP to JavaScript

 "title1",
        "author" => "author1"
    ),
    array(
        "title" => "title2",
        "author" => "author2"
    ),
    array(
        "title" => "title3",
        "author" => "author3"
    )
);
?>

Conclusion:

It is very easy to pass the data from PHP to JavaScript. We have tried to make you understand with different case scenarios that must have helped you to understand all.

If you have any queries related to this post, please comment below i would love to help you.

You can also check How to get a random key from a PHP array

The post How to access PHP variables in JavaScript or jQuery appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.

How to Remove Empty Object From JSON in JavaScript

atcodex — Sat, 08 Aug 2020 07:37:19 +0000

In this post, we have removed empty objects in JSON using Javascript. It is a very simple code snippet to remove all empty objects in JSON.




    How to remove empty object from json in javascript

Output

The post How to Remove Empty Object From JSON in JavaScript appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.

How to upload a file with JavaScript and PHP

atcodex — Thu, 23 Jul 2020 07:39:04 +0000

File uploading option on a website is common. But to make it work from scratch seems a very difficult task and sometimes we have to waste lots of time to figure out if things do not work properly.

In this tutorial, we will upload the file using javascript and PHP with a simple function. Javascript will be used to initiate the function and PHP to upload the file on the server. Once the setup is done, you do not need to reload the file to upload one and more images simultaneously.

HTML code to upload file

First, we need to create a file with the below code. The first input tag would be file to select the file. The second input tag would be button to initiate the javascript function.

Javascript code to upload file

Create uploadFile() function which will be called on the Upload button click in HTML.

// Upload file
function uploadFile() {

   var files = document.getElementById("file").files;

   if(files.length > 0 ){

      var formData = new FormData();
      formData.append("file", files[0]);

      var xhttp = new XMLHttpRequest();

      // Set POST method and ajax file path
      xhttp.open("POST", "ajaxfile.php", true);

      // call on request changes state
      xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {

           var response = this.responseText;
           if(response == 1){
              alert("Upload successfully.");
           }else{
              alert("File not uploaded.");
           }
         }
      };

      // Send request with data
      xhttp.send(formData);

   }else{
      alert("Please select a file");
   }

}

PHP code to upload file

Make a ajaxfile.php file and an upload folder to store the uploaded files.

PHP will check the file extensions and only allow Pdf, Doc, Docx, Jpg, Png, Jpeg to be uploaded. If the user will try to upload other then this extension file the function will exit with response ‘0’;

Output

Download Source Code

The post How to upload a file with JavaScript and PHP appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.

How to Remove HTML Tags from String using JavaScript

atcodex — Thu, 11 Jun 2020 12:48:50 +0000

Sometimes we get data from the server which contains HTML elements such as div span or internal CSS. We can either remove or parse those tags using backend language or we can achieve the same with javascript replace() function. Using Regex in javascript we can remove any HLMT tag from the string. following is the code to remove the HMLT tags from string.

var str = "Hello, atcodex";
var textData = str.replace(/<\/?[^>]+(>|$)/g, "");

The post How to Remove HTML Tags from String using JavaScript appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.

How to use Google map autocomplete location search API with example

atcodex — Tue, 19 May 2020 06:18:13 +0000

What is an API

API Stands for Application Programming Interface, which allows us to connect two or more applications to each other. Whenever you use an application like Whatsapp, Instagram, or any other App on your phone, your phone is using an API to communicate with the server to show you data.

When you use any app on your mobile, the app sends the data to the server. Then the server process the data and send it back to the app. App then processes the data and display you in a readable way. This is what an API does.

Following are the simple steps to enable the API

1 – Login to https://console.cloud.google.com/

2 – Click on My project

Click on my project (it might be different for you, for us its showing my project because we have already created a project with this name)

3 – Click on New project

Click on new project, fill the details and select

4 – Enable API and Services

5 – Enable Maps Javascript API and Places API

6 – Create the Credentials

7 – Restrict the key

8 – Key Restriction options

There are multiple key restriction options for API to use on different platforms.

Google API is not free, you have to pay the monthly bill on a usage basis. For billing, you need to attach your credit card to google account only then the API will work. And if still there is any problem, just inspect the element after clicking the right button in the browser, you will see each and every detail about the error in console.

9 – Enable Billing



  
    
    
    Places Search Box

The post How to use Google map autocomplete location search API with example appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.