<h2 id="introduction">Introduction</h2>
Axios is a promise-based HTTP client library that makes it simple to send asynchronous HTTP requests (such as <code>POST</code>, <code>GET</code>, and <code>DELETE</code>) to REST endpoints, mainly APIs.
<blockquote>
In this article, we will learn how to send POST JSON requests with Axios, and how to handle both previously serialized and unserialized data.
</blockquote>
<h2 id="howtosendpostjsonrequestsusingaxios">How to Send POST JSON Requests Using Axios</h2>
The POST request is used to send data to an endpoint. For example, if we have a registration page where users submit their information, this information can be sent as JSON to the endpoint we specify using a POST JSON request.
We use the <code>axios.post()</code> method to send a POST request with Axios, which takes two major parameters - the URL of the endpoint (<code>url</code>), and the object representing data we want to post (<code>data</code>):
<pre><code class="hljs">axios.post(url[, data[, config]])
</code></pre>
Besides those two parameters, there is also a third one - <code>config</code>. It is used to configure the POST request we are sending, mainly to set headers.
<h3 id="sendingunserializeddata">Sending Unserialized Data</h3>
It is important to note that Axios uses JSON for data posting by default, meaning that any object we pass into Axios automatically serializes the object to JSON and sets the <code>Content-Type</code> header to <code>application/json</code>. Let's illustrate that in the example - assume we are posting the object <code>{ name: 'John Doe' }</code>:
<pre><code class="hljs">const result = await axios.post(&#x27;https://testapi.org/post&#x27;, { name: &#x27;John Doe&#x27; });
</code></pre>
Axios will automatically serialize the object into JSON format:
<pre><code class="hljs">console.log(result.data.data); // &#x27;{&quot;name&quot;:&quot;John Doe&quot;}&#x27;
</code></pre>
And as we said, it will also set our <code>Content-Type</code> header to <code>application/json</code>:
<pre><code class="hljs">console.log(result.data.headers[&#x27;Content-Type&#x27;]); // &#x27;application/json;charset=utf-8&#x27;
</code></pre>
<h3 id="sendingserializedjsonstring">Sending Serialized JSON String</h3>
So far, we've seen that Axios will automatically serialize whatever data we send it, but in this case, we'll send a serialized JSON string as the second parameter of the <code>axios.post()</code> method:
<pre><code class="hljs">const usersName = JSON.stringify({ name: &#x27;John Doe&#x27; });
</code></pre>
Axios will simply treat this data as a form-encoded request body rather than setting the content-type header to <code>application/json</code>, as shown below:
<pre><code class="hljs">const usersName = JSON.stringify({ name: &#x27;John Doe&#x27; });
const result = await axios.post(&#x27;https://testapi.org/post&#x27;, usersName);

console.log(result.data.headers[&#x27;Content-Type&#x27;]); // &#x27;application/x-www-form-urlencoded&#x27;,
</code></pre>
To resolve this issue, we need to explicitly set the <code>Content-Type</code> header to <code>application/json</code>. We can do that by passing the <code>config</code> argument when calling the <code>axios.post()</code> method:
<pre><code class="hljs">const usersName = JSON.stringify({ name: &#x27;John Doe&#x27; });
customConfig = {
 headers: {
 &#x27;Content-Type&#x27;: &#x27;application/json&#x27;
 }
};
const result = await axios.post(&#x27;https://testapi.org/post&#x27;, usersName, customConfig);

console.log(result.data.data); // &#x27;{&quot;name&quot;:&quot;John Doe&quot;}&#x27;
console.log(result.data.headers[&#x27;Content-Type&#x27;]); // &#x27;application/json&#x27;,
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we learned how to send POST JSON requests with Axios, fully aware that these data could be serialized or non-serialized, and we dealt with both scenarios.

Dimitrije Stamenic

Joel Olawanle

In this tutorial, we'll take a look at how to send a JSON POST request to a REST API using Axios. We'll learn how to send both JavaScript objects and serialized JSON objects.

Sending POST JSON Requests With Axios

<h2 id="introduction">Introduction</h2>
When creating React applications that fetch content from external sources that take some time to load, it is always a good idea to provide a pleasant user experience by engaging users and keeping their attention with a loader, as this helps users understand what is going on rather than leaving them to speculate.
<blockquote>
In this guide, we will learn how to display loader animation when loading an application and retrieving content from external sources, by utilizing the <code>react-spinners</code> library.
</blockquote>
To that end - we'll build a small application that fetches quotes, with a loading screen while a quote is being fetched:
<img src="https://s3.stackabuse.com/media/articles/how-to-create-a-loading-animation-in-react-from-scratch-2.gif" alt="react-loading-animation-example">
<blockquote>
If you'd like to learn more about creating spinners from scratch, read our <a target="_blank" href="https://stackabuse.com/how-to-create-a-loading-animation-in-react-from-scratch/">&quot;How to Create a Loading Animation in React from Scratch&quot;</a>!
</blockquote>
<h2 id="creatingasamplereactapp">Creating a Sample React App</h2>
Let's begin by looking at our React markup. Basically, we have two <code>&lt;div&gt;</code> elements in the parent <code>&lt;div&gt;</code> (for the sake of simplicity) - one is the <code>loader-container</code> and the second is the <code>main-content</code>:
<pre><code class="hljs">import React from &#x27;react&#x27;;

const App = () =&gt; {
 return (
 &lt;div className=&quot;container&quot;&gt;
 &lt;div className=&quot;loader-container&quot;&gt;
 &lt;div className=&quot;spinner&quot;&gt;&lt;/div&gt;
 &lt;/div&gt;

 &lt;div className=&quot;main-content&quot;&gt;
 &lt;h1&gt;Hello World!&lt;/h1&gt;
 &lt;p&gt;
 This is a demo Project to show how to add animated loading with React.
 &lt;/p&gt;
 &lt;div className=&quot;buttons&quot;&gt;
 &lt;button className=&quot;btn&quot;&gt;
 &lt;a href=&quot;#&quot;&gt;Read Article&lt;/a&gt;
 &lt;/button&gt;
 &lt;button className=&quot;btn get-quote&quot;&gt;
 Generate Quote
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;div className=&quot;quote-section&quot;&gt;
 &lt;blockquote className=&quot;quote&quot;&gt;
 If you do not express your own original ideas, if you do not listen
 to your own being, you will have betrayed yourself.
 &lt;/blockquote&gt;
 - &lt;span className=&quot;author&quot;&gt;Rollo May&lt;/span&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
};

export default App;
</code></pre>
So far, we've only created a <code>&lt;div&gt;</code> for our loader. Now, let's see how we can add it and trigger it when some content loads.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: You can check out <a rel="nofollow noopener noreferrer" target="_blank" href="https://github.com/olawanlejoel/loader-anim">this repository</a> and cross-check the code if need be while reading this guide.

 </div>
 </div>
 </div>
 <h2 id="usingreactspinnersinourapplication">Using React Spinners in Our Application</h2>
<a rel="nofollow noopener noreferrer" target="_blank" href="https://www.npmjs.com/package/react-spinners"><code>react-spinner</code></a> is a collection of many spinners that we can use in our React applications. To use React spinner, we must first install the library in our project's directory by running any of the following command:
<pre><code class="hljs">$ npm install --save react-spinners
// Or
$ yarn add react-spinners
</code></pre>
Once that is done, we can now import the particular loader we want to use (in this case, a <code>ClipLoader</code>) and set some styling like size and color:
<pre><code class="hljs">import React, { useState, useEffect } from &#x27;react&#x27;;
import ClipLoader from &#x27;react-spinners/ClipLoader&#x27;;

const App = () =&gt; {
 const [loadingInProgress, setLoading] = useState(false);
 
 &lt;!-- ... --&gt;
 
 return (
 &lt;div className=&quot;container&quot;&gt;
 {loadingInProgress ? (
 &lt;div className=&quot;loader-container&quot;&gt;
 &lt;ClipLoader color={&#x27;#fff&#x27;} size={150} /&gt;
 &lt;/div&gt;
 ) : (
 &lt;div className=&quot;main-content&quot;&gt;
 &lt;h1&gt;Hello World!&lt;/h1&gt;
 &lt;p&gt;
 This is a demo Project to show how to add animated loading with
 React.
 &lt;/p&gt;
 &lt;div className=&quot;buttons&quot;&gt;
 &lt;button className=&quot;btn&quot;&gt;
 &lt;a href=&quot;#&quot;&gt;Read Article&lt;/a&gt;
 &lt;/button&gt;
 &lt;button className=&quot;btn get-quote&quot; onClick={getRandomQuote}&gt;
 Generate Quote
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;div className=&quot;quote-section&quot;&gt;
 &lt;blockquote className=&quot;quote&quot;&gt;{quote.content}&lt;/blockquote&gt;-{&#x27; &#x27;}
 &lt;span className=&quot;author&quot;&gt;{quote.author}&lt;/span&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 )}
 &lt;/div&gt;
 );
};

export default App;
</code></pre>
The <code>react-spinner</code> library has a lot of useful features, for example, we can use it to handle loading without using ternary operators:
<pre><code class="hljs">&lt;ClipLoader color={&#x27;#fff&#x27;} loading={loadingInProgress} size={150} /&gt;
</code></pre>
Instead of using ternary operator to display the content based on the value of the <code>loadingInProgress</code> variable, we've simply used <code>loading={loadingInProgress}</code> instead.
We can also alter the CSS used to control the <code>spinner-icon</code> by using an <code>override</code> attribute:
<pre><code class="hljs">import { useState } from &quot;react&quot;;
import { css } from &quot;@emotion/react&quot;;
import ClipLoader from &quot;react-spinners/ClipLoader&quot;;

const override = css`
 display: block;
 margin: 0 auto;
 border-color: red;
`;

function App() {
 let [loadingInProgress, setLoading] = useState(true);

 return (
 &lt;div className=&quot;container&quot;&gt;
 &lt;ClipLoader color={&#x27;#fff&#x27;} loading={loadingInProgress} css={override} size={150} /&gt;

 // ...
 &lt;/div&gt;
 );
}

export default App;
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: We can read more about <code>react-spinner</code> in the <a rel="nofollow noopener noreferrer" target="_blank" href="https://www.npmjs.com/package/react-spinners">documentation</a>, where we can see a list of available sinners as well.

 </div>
 </div>
 </div>
 <h2 id="conclusion">Conclusion</h2>
In this short guide, we've taken a look at how you can use <code>react-spinners</code> to add a loading spinner to an element in React.

David Landup

In this short guide, learn how to create a loading spinner animation in JavaScript's React library, using `react-spinners`!

How to Create a Loading Animation in React with react-spinners

In this tutorial, we'll take a look at how to create a spinning loader in JavaSctript's React library. We'll learn how to create a loader using GIF images and CSS animation from scratch with practical code samples.

How to Create a Loading Animation in React from Scratch

<h2 id="introduction">Introduction</h2>
When developing web applications with Vue.js that have many pages and incorporate many features such as logging in, authentication, carting, as well as a good deal of CRUD applications, we will need to implement routing at some point, which involves redirecting a user from one page to another either programmatically or when they access a route via the URL.
<blockquote>
In this article, we will learn the various means of redirecting and routing in Vue.js with practical code samples.
</blockquote>
<h3 id="prerequisite">Prerequisite</h3>
Routing in Vue.js is accomplished through the use of the <code>vue-router</code> package, which enables us to easily perform single page routing within our Vue application. To implement router redirects in Vue, we must first install this package in our project, which we can do by running the following command in our terminal:
<pre><code class="hljs">$ npm install vue-router@4
</code></pre>
<h2 id="redirectwithvue">Redirect with Vue</h2>
All routes in Vue.js are configured in the router's configuration file, which is a dedicated file for all types of routing in Vue. This file is usually found under <code>/src/router/index.js</code>.
To use a route, we have to declare it in the router configuration file, after which we can reference it in other parts of the application. Routing can be done in a variety of ways, and different scenarios may necessitate different redirects, but let's start with the most basic type of redirect before moving on to others such as programmatic, conditional, and error redirects.
When a user navigates to the <code>/home</code> route, say it should always redirect them to the <code>/</code> route, thereby showing the <code>HomePage</code>. This can be done via redirects:
<pre><code class="hljs">const routes = [
 {
 path: &#x27;/&#x27;,
 name: &#x27;Home&#x27;,
 component: HomePage,
 },
 {
 path: &#x27;/home&#x27;,
 redirect: &#x27;/&#x27;,
 }
];
</code></pre>
The main emphasis is on the second object which takes in the <code>path</code> and <code>redirect</code> options, when a user navigates to the set <code>path</code> it automatically redirects them to the path set in the <code>redirect</code> option.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: We will notice that the redirect actually replaces the link, meaning when we navigate to <code>/home</code> the URL switches to <code>/</code> thereby showing the component set for the <code>/</code> route.

 </div>
 </div>
 </div>
 In a situation where we don’t want the URL to change, but we want it to show the component set for the <code>/</code> route, then we can make use of an Alias.
<h3 id="alias">Alias</h3>
An <code>alias</code> is an option we can add an alias for an existing route. In effect, we can have multiple routes that work with a particular component, rather than redirecting to a single route that handles it.
For example, when we set an alias to <code>/home</code> and the actual path is set to <code>/</code> with a component of <code>HomePage</code>, when a user navigates to <code>/home</code> the <code>HomePage</code> component will appear, but the URL remains <code>/home</code>:
<pre><code class="hljs">{
 path: &#x27;/&#x27;,
 name: &#x27;Home&#x27;,
 component: HomePage,
 alias: &#x27;/home&#x27;,
},
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: An <code>alias</code> can take an array of more than one path and these paths can include parameters.

 </div>
 </div>
 </div>
 <pre><code class="hljs">{
 path: &#x27;/&#x27;,
 name: &#x27;Home&#x27;,
 component: HomePage,
 alias: [&#x27;/home&#x27;, &#x27;/homepage&#x27;],
},
</code></pre>
Now - <code>/</code>, <code>/home</code> and <code>/homepage</code> all actually handle the same <code>HomePage</code> component!
<h2 id="redirectprogrammatically">Redirect Programmatically</h2>
We can also perform programmatic redirects, such as when a button is clicked or an action is performed. This is handled the router's <code>push()</code> method, which can be used anywhere in our application. When the button is clicked in the example below, it takes the user to the specified path:
<pre><code class="hljs">&lt;template&gt;
 &lt;h2&gt;Home Page&lt;/h2&gt;
 &lt;button @click=&quot;$router.push(&#x27;/about&#x27;)&quot;&gt;Redirect Me&lt;/button&gt;
&lt;/template&gt;
</code></pre>
This can also be handled within our script tag using the <code>this</code> keyword:
<pre><code class="hljs">&lt;template&gt;
 &lt;h2&gt;Home Page&lt;/h2&gt;
 &lt;button @click=&quot;redirectMe()&quot;&gt;Redirect Me&lt;/button&gt;
&lt;/template&gt;

&lt;script&gt;
 export default {
 methods: {
 redirectMe() {
 this.$router.push(&#x27;/about&#x27;);
 },
 },
 };
&lt;/script&gt;
</code></pre>
It’s important to note that the argument could be a string path as we used earlier or a location descriptor object which could accept name, path, etc.:
<pre><code class="hljs">// String path
$router.push(&#x27;/about&#x27;)

// Descriptor object with path
$router.push({ path: &#x27;/about&#x27; })

// Named route 
$router.push({ name: &#x27;About&#x27; })
</code></pre>
<h3 id="replacingthecurrenturl">Replacing The Current URL</h3>
As we navigate using programmatic methods, we're pushing and adding to our browser's history just as the user would through manual clicking. If we want to push without creating a new history entry - we'll want to replace the entry:
<pre><code class="hljs">router.push({ path: &#x27;/about&#x27;, replace: true })
// This is equivalent to
router.replace({ path: &#x27;/about&#x27; })
</code></pre>
<h2 id="conditionalredirect">Conditional Redirect</h2>
We may want to redirect users when a specific command is completed, such as when we want to authenticate a user, confirm a product purchase, and so on. This is typically accomplished through the use of conditional statements, such as:
<pre><code class="hljs">&lt;template&gt;
 &lt;h2&gt;Home Page&lt;/h2&gt;
 &lt;button @click=&quot;checkUser()&quot;&gt;Authenticate Me&lt;/button&gt;
&lt;/template&gt;

&lt;script&gt;
 export default {
 data(){
 return{
 isLoggedIn: true,
 }
 },
 methods: {
 checkUser() {
 if(this.isLoggedIn){
 this.$router.push(&#x27;/dashboard&#x27;);
 }else{
 this.$router.push(&#x27;/login&#x27;);
 }
 },
 },
 };
&lt;/script&gt;
</code></pre>
We can also perform this without having to create a method:
<pre><code class="hljs">&lt;template&gt;
 &lt;h2&gt;Home Page&lt;/h2&gt;
 &lt;button @click=&quot;{ isLoggedIn ? $router.push(&#x27;/dashboard&#x27;) : $router.push(&#x27;/login&#x27;); }&quot;&gt;
 Authenticate Me
 &lt;/button&gt;
&lt;/template&gt;

&lt;script&gt;
 export default {
 data() {
 return {
 isLoggedIn: true,
 };
 },
 };
&lt;/script&gt;
</code></pre>
<h2 id="redirecttoa404page">Redirect to a 404 Page</h2>
Finally, it would be beneficial to include how to handle errors when a user navigates to the incorrect route. When a user navigates to a route that is not declared in our router's configuration file, it displays an empty component, which is typically not the desired behavior.
This is easily handled in by catching all routes except those configured with a regular expression and assigning them to an error component:
<pre><code class="hljs">{
 path: &#x27;/:catchAll(.*)&#x27;,
 name: &#x27;ErrorPage&#x27;,
 component: ErrorPage
}
</code></pre>
<h2 id="conclusion">Conclusion</h2>
In this article, we learned how to redirect in Vue and how to handle redirects in various ways.

In this guide, learn how to redirect a user in Vue programmatically, conditionally, on a button press, automatically, and how to keep multiple URLs pointing to the same component via aliases.

Guide to Vue Router Redirects

<h2 id="introduction">Introduction</h2>
Vue is a JavaScript framework that allows developers to create components that are used to divide the user interface into smaller pieces, rather than building the entire UI in a single file. When using components, we may want to pass data down from the parent component to the child component at some point, this is usually done with properties, also known as props.
<blockquote>
In this guide, we will take a deep dive into props, we'll take a look at how props work, the various prop types, how to pass various forms of data, and lots more.
</blockquote>
<h2 id="whatareprops">What Are Props?</h2>
Props can be a crucial concept to understand when working with components in Vue. Props, which stands for properties, enable us to pass data and functionality from one component to another. It's important to understand that props dataflow is one directional - we can pass data only from a parent to a child component, not another way around.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Props are read-only, which means the child component cannot modify them because the data is owned by the parent component and is only passed down to the child component to read it.

 </div>
 </div>
 </div>
 <h2 id="declaringpropsinvue">Declaring Props in Vue</h2>
Registering props is simple; all we have to do is add it to the <code>props</code> array in the <code>&lt;scripts&gt;</code> tag. Then, we can use it in our app's <code>&lt;template&gt;</code> section. This occurs in the child component, where data is received from the parent component:
<pre><code class="hljs">&lt;template&gt;
 &lt;p&gt;{{ name }}&lt;/p&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 props: [&#x27;name&#x27;]
}
&lt;/script&gt;
</code></pre>
This is the Single File Component syntax. Alternatively, you can register props for a specific component via:
<pre><code class="hljs">Vue.component(&#x27;user-profile&#x27;, {
 props: [&#x27;name&#x27;],
 template: &#x27;&lt;p&gt;My name is {{ name }}&lt;/p&gt;&#x27;
});
</code></pre>
<h3 id="declaringmultiplepropsinvue">Declaring Multiple Props in Vue</h3>
<code>props</code> are an array - you can add as many as you'd like:
<pre><code class="hljs">&lt;template&gt;
 &lt;p&gt;My name is {{ name }} and I am {{ age }} years.&lt;/p&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 props: [
 &#x27;name&#x27;, 
 &#x27;age&#x27;
 ],
}
&lt;/script&gt;
</code></pre>
<h2 id="passingpropsintocomponents">Passing Props Into Components</h2>
Passing props into components in Vue is similar to passing HTML attributes into HTML tags, and this can accept all types of data, including methods. For example, if we have a profiles component and want to pass user details into the user component, we can do something like this:
<pre><code class="hljs">&lt;template&gt;
 &lt;UserProfile
 v-bind:name=&quot;user.name&quot;
 :img=&quot;user.image&quot;
 /&gt;
&lt;/template&gt;
</code></pre>
<h3 id="staticanddynamicprops">Static and Dynamic Props</h3>
Props can be passed in one of two ways: as a static value or as a dynamic value. By static, we mean that these values are passed directly into the component without the need for <code>v-bind</code> or <code>:</code> (semicolon):
<pre><code class="hljs">&lt;template&gt;
 &lt;UserProfile name=&quot;John Doe&quot; /&gt;
&lt;/template&gt;
</code></pre>
While for dynamic values we use the <code>v-bind</code> or its <code>:</code> shortcut:
<pre><code class="hljs">&lt;template&gt;
 &lt;UserProfile :name=name /&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 &lt;!-- ... --&gt;
 data() {
 return {
 name: &#x27;John Doe&#x27;
 }
 },
 &lt;!-- ... --&gt;
}
&lt;/script&gt;
</code></pre>
Dynamic values may be inherited from the <code>data()</code> option of our component script.
<h3 id="passingpropswithternaryoperators">Passing Props With Ternary Operators</h3>
Oftentimes we want to pass different data based on the value of a condition. In that case, the ternary operator comes in handy, because we can use it inside a prop value:
<pre><code class="hljs">&lt;template&gt;
 &lt;div id=&quot;app&quot;&gt;
 &lt;Home :title=&quot;isHomepage? &#x27;Welcome to the homepage&#x27; : &#x27;This is not the Homepage&#x27;&quot; /&gt;
 &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import Home from &#x27;./components/Home&#x27;
export default {
 &lt;!-- ... --&gt;
 data(){
 return{
 isHomepage: true,
 }
 },
 components: {
 Home
 }
}
&lt;/script&gt;
</code></pre>
In this example, we've checked the <code>loggedIn</code> value - since it is <code>true</code> (a user is already logged in) the resulting prop value will be <code>Log Out</code>.
<h3 id="passingmethodsasprops">Passing Methods as Props</h3>
It is also possible to pass methods as props down to a child component, which works similarly to passing other data types:
<pre><code class="hljs">&lt;template&gt;
 &lt;ChildComponent :method=&quot;myFunction&quot; /&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 &lt;!-- ... --&gt;
 methods: {
 myFunction() {
 &lt;!-- ... --&gt;
 }
 }
};
&lt;/script&gt;
</code></pre>
<h2 id="propsvaluetypes">Props Value Types</h2>
So far, we have only passed string values, but, in reality, any data type can be passed as a prop - including numbers, objects, arrays, Boolean, methods, dates, and so on.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: When we use a static method to pass a number, object, array, and boolean values, we must bind them to tell Vue that this is a JavaScript expression rather than a string (matching the method's name).

 </div>
 </div>
 </div>
 So, to pass them, we pass them as a JavaScript expression (wrapped in quotes), which is evaluated to the correct data type implicitly:
<pre><code class="hljs">&lt;template&gt;
 &lt;UserProfile :age=&quot;22&quot; /&gt;
 &lt;UserProfile :married=&quot;false&quot; /&gt;
 &lt;UserProfile :hobbies=&quot;[&#x27;Singing&#x27;, &#x27;Gaming&#x27;, &#x27;Reading&#x27;]&quot; /&gt;
 &lt;UserProfile
 :name=&quot;{
 firstName: &#x27;John&#x27;,
 lastName: &#x27;Doe&#x27;
 }&quot;
 /&gt;
&lt;/template&gt;
</code></pre>
However, implicit conversions aren't without fault in practical settings. In most cases - you'll want to specify the types explicitly.
<h3 id="specifyingpropstypesexplicitly">Specifying Props Types Explicitly</h3>
Knowing that we can pass any type of data as a prop, the best practice is to specify the type of prop we want to use by declaring them as part of an object rather than an array, and to explicitly specify the type of that value. This is useful because Vue sends a warning alert (in development mode) to the console if the type of data passed does not match the specified prop type:
<pre><code class="hljs">&lt;template&gt;
 &lt;p&gt;My name is {{ name }} and I am {{ age }} years.&lt;/p&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 props: {
 name: String,
 age: Number,
 }
}
&lt;/script&gt;
</code></pre>
<h2 id="workingwithprops">Working With Props</h2>
As previously stated, the primary goal of using props is to pass down data. Say we are building an app that will be displaying user details - we will prefer to create reusable components so that we can pass these data as props, rather than manually creating separate components for each user. Let's create a parent component for that app:
<pre><code class="hljs">&lt;template&gt;
 &lt;div id=&quot;app&quot;&gt;
 &lt;UserProfile :name=&#x27;userName&#x27; age=&#x27;22&#x27; /&gt;
 &lt;UserProfile :name=&#x27;userName&#x27; age=&#x27;18&#x27; /&gt;
 &lt;UserProfile :name=&#x27;userName&#x27; age=&#x27;27&#x27; /&gt;
 &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import UserProfile from &#x27;./components/UserProfile&#x27;

export default {
 &lt;!-- ... --&gt;
 data(){
 return{
 userName:&quot;John Doe&quot;,
 }
 },
 components: {
 UserProfile
 }
}
&lt;/script&gt;
</code></pre>
And here's what the child component will look like:
<pre><code class="hljs">&lt;template&gt;
 &lt;div&gt;
 &lt;h2&gt;My name is {{name}} and I am {{age}} years old.&lt;/h2&gt;
 &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 &lt;!-- ... --&gt;
 props:{
 name:String,
 age:Number,
 }
}
&lt;/script&gt;
</code></pre>
<h2 id="validatingprops">Validating Props</h2>
Previously, we saw that adding prop types helps check the type of data returned by the props, which is a way to validate the props, but we can also add the required key and its value to the prop, as shown below:
<pre><code class="hljs">props: {
 name: {
 type: String,
 required: true
 }
}
</code></pre>
<h2 id="settingdefaultpropvalues">Setting Default Prop Values</h2>
In some cases, we may want to set default values so that if the child component is unable to get data from the parent component, such data can be rendered:
<pre><code class="hljs">props: {
 studentUserName: {
 type: String,
 required: true,
 default: &quot;student##&quot;
 },
 studentPassword: {
 type: String,
 required: true,
 default: &quot;password123&quot;
 },
 userImg: {
 type: String,
 default: &quot;../default-avatar.jpg&quot;
 },
},
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The default value can also be an object or a method that returns a value.

 </div>
 </div>
 </div>
 <h2 id="conclusion">Conclusion</h2>
Props are a crucial part of Vue when using components. In this article, we've taken a look at what props are, how to use them in Vue, how to declare and register them, set default values, validate them, etc.

In this guide, learn what Vue props are, how to register and use them, how to pass data using props, validate them, set data types, default values, and more!

Guide to Vue Props

Branko Ilic

In this guide, learn everything you need to know about Interfaces in Java - why use them, how they're defined, static and default methods, best practices, naming conventions, functional interfaces, and multiple inheritance as well as interface inheritance.

Guide to Interfaces in Java

<h2 id="introduction">Introduction</h2>
When working with strings or large amounts of text, you are probably going to encounter situations where you need to count how many times a specific substring occurred within another string.
<blockquote>
In this article, we'll take a look at how to use JavaScript to count the number of substring occurrences in a string. We will look at the various approaches and methods for obtaining that number.
</blockquote>
But before we begin, let's first define what a substring is.
<h3 id="whatisasubstring">What Is a Substring?</h3>
A substring is a clearly defined sequence of consecutive characters in a string. For example, if we have the string &quot;My name is John Doe&quot;, then &quot;name is&quot; is a substring, but &quot;is name&quot; is not because it is no longer a consecutive sequence (we've changed the order of words). Individual words such as &quot;is&quot; and &quot;name&quot; are always substrings.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: &quot;y name is Jo&quot; is a valid substring of the &quot;My name is John Doe&quot; as well. In other words, substrings are not always whole words, they can be much less readable.

 </div>
 </div>
 </div>
 There are many ways to accomplish this in JavaScript, but two major methods are the <code>split()</code> method and regular expressions.
<h2 id="countthenumberofsubstringsinstringwithsplitmethod">Count the Number of Substrings in String With split() Method</h2>
The <code>split()</code> is a JavaScript method for splitting strings into an array of substrings while preserving the original string. This method accepts a separator and separates a string based on it. If no separator is supplied, the <code>split()</code> returns an array with only one element - the original string.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Probably the most obvious example of the separator is the blank space. When you provide it as a separator for the <code>split()</code> method, the original string will be sliced up whenever a blank space occurs. Therefore, the <code>split()</code> method will return an array of individual words from the original string.

 </div>
 </div>
 </div>
 In this article, we'll use one handy trick to get the number of occurrences of a substring in a string. We'll set the substring to be the separator in the <code>split()</code> method. That way, we can extract the number of occurrences of the substring from the array that the <code>split()</code> method returned:
<pre><code class="hljs">let myString = &quot;John Doe has 5 oranges while Jane Doe has only 2 oranges, Jane gave Mike 1 of her orange so she is now left with only 1 Orange.&quot;;
let mySubString = &quot;orange&quot;;

let count = myString.split(mySubString).length - 1;
console.log(count); // 3
</code></pre>
The code above returned <code>3</code>, but the <code>myString</code> has only one instance of the string &quot;orange&quot;. Let's inspect what happened by examining the array created after we've split the original string with the &quot;orange&quot; as the separator:
<pre><code class="hljs">console.log(myString.split(mySubString));
</code></pre>
This will give us:
<pre><code class="hljs">[&#x27;John Doe has 5 &#x27;, &#x27;s which Jane Doe has only 2 &#x27;, &#x27;s, Jane gave Mike 1 of her &#x27;, &#x27; so she is now left with only 1 Orange.&#x27;]
</code></pre>
Essentially, the <code>split()</code> method removed all occurrences of the string &quot;orange&quot; from the original string and sliced it in those places where the substring was removed.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Notice how that applies to the string &quot;oranges&quot; - the &quot;orange&quot; is its substring, therefore, <code>split()</code> removes &quot;orange&quot; and leaves us only with &quot;s&quot;.

 </div>
 </div>
 </div>
 Since we've found three occurrences of the string &quot;orange&quot;, the original string was sliced in three places - therefore we've produced four substrings. That's why we need to subtract <code>1</code> from the array length when we calculate the number of occurrences of the substring.
That's all good, but there is one more orange in the original string - the last word is &quot;Orange&quot;. Why haven't we counted it in the previous example? That's because the <code>split()</code> method is case-sensitive, therefore it considers &quot;orange&quot; and &quot;Orange&quot; as different elements.
If you need to make your code case-insensitive, a good solution would be to first convert the entire string and substring to a particular text case before checking for occurrences:
<pre><code class="hljs">let myString = &quot;John Doe has 5 oranges while Jane Doe has only 2 oranges, Jane gave Mike 1 of her orange so she is now left with only 1 Orange.&quot;;
let mySubString = &quot;ORANGE&quot;;

let myStringLC = myString.toLowerCase();
let mySubStringLC = mySubString.toLowerCase();

let count = myStringLC.split(mySubStringLC).length - 1;
console.log(); // 4
</code></pre>
Additionally, the one last thing we could do is to make our code reusable by wrapping it within a function:
<pre><code class="hljs">const countOccurence = (string, word) =&gt; {
 let stringLC = string.toLowerCase();
 let wordLC = word.toLowerCase();
 
 let count = stringLC.split(wordLC).length - 1;
 
 return count
};
</code></pre>
<h2 id="countthenumberofsubstringsinstringwithregex">Count the Number of Substrings in String With RegEx</h2>
Another method for counting the number of occurrences is to use regular expressions (RegEx). They are patterns of characters used to search, match, and validate strings. Probably the most common use case for regular expressions is form validation - checking whether the string is a (valid) email, a phone number, etc. But in this article, we'll use it to count the number of occurrences of a substring in a string.
<blockquote>
If you want to get to know more about regular expressions in JavaScript, you should read our comprehensive guide - <a target="_balnk" href="https://stackabuse.com/guide-to-regular-expressions-and-matching-strings-in-javascript/">&quot;Guide to Regular Expressions and Matching Strings in JavaScript&quot;</a>.
</blockquote>
First of all, we need to define a regular expression that will match the substring we are looking for. Assuming we want to find the number of occurrences of the string &quot;orange&quot; in a larger string, our regular expression will look as follows:
<pre><code class="hljs">let regex = /orange/gi;
</code></pre>
In JavaScript, we write a regular expression pattern between two forward slashes - <code>/pattern/</code>. Optionally, after the second forward slash, you can put a list of flags - special characters used to alternate the default behavior when matching patterns.
For example, by default, regular expressions match only the first occurrence of the pattern in a search string. Also, matching is case-sensitive, which is maybe not what we want when searching for substrings. Because of that, we'll introduce two flags we'll be using for the purpose of this article:
<ul>
<li><code>g</code> - makes sure that we get all occurrences of the pattern (not just the first one)</li>
<li><code>i</code> - makes sure that matching is case-insensitive</li>
</ul>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Based on your needs, you can choose what flags you will use. These are not mandatory.

 </div>
 </div>
 </div>
 Now, let's use a previously created regular expression to count the number of occurrences of the string &quot;orange&quot; in the <code>myString</code>:
<pre><code class="hljs">let myString = &quot;John Doe has 5 oranges while Jane Doe has only 2 oranges, Jane gave Mike 1 of her orange so she is now left with only 1 Orange.&quot;;

let regex = /orange/gi;
let count = (myString.match(regex) || []).length;

console.log(count); // 4
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: We've added <code> || []</code> in returns an empty array if there is no match. Therefore, the number of occurrences will be set to <code>0</code>.

 </div>
 </div>
 </div>
 Alternatively, we can use the <code>RegExp()</code> constructor to create a regular expression. It accepts a search pattern as the first argument, and flags as the second:
<pre><code class="hljs">let myString = &quot;John Doe has 5 oranges while Jane Doe has only 2 oranges, Jane gave Mike 1 of her orange so she is now left with only 1 Orange.&quot;;

let regex = new RegExp(&quot;orange&quot;, &quot;gi&quot;);
let count = (myString.match(regex) || []).length;

console.log(count); // 4
</code></pre>
Additionally, we can make make this a reusable by wrapping it in a separate function:
<pre><code class="hljs">let countOcurrences = (str, word) =&gt; {
 var regex = new RegExp(word, &quot;gi&quot;);
 let count = (str.match(regex) || []).length;
 return count;
};
</code></pre>
<h2 id="strictmatchingexactphrases">Strict Matching Exact Phrases</h2>
Sometimes, you want to match for a strict phrase or word - so that &quot;oranges&quot; isn't included in your counts, or any word that includes &quot;orange&quot; in itself, but isn't strictly &quot;orange&quot;. This is a more specific use case of searching for strings within strings, and is fortunately fairly easy!
<pre><code class="hljs">let regex = /\Worange\W/gi;
</code></pre>
By wrapping our term within <code>\W \W</code>, we're matching strictly for &quot;orange&quot; (case-insensitive) and this regex would match only twice in our sentence (both &quot;oranges&quot; aren't matched).
<h2 id="benchmarkingperformance">Benchmarking Performance</h2>
When we run both methods using the <a rel="noopener noreferrer nofollow" target="_blank" href="http://jsben.ch/YOZZh">JS Benchmark</a>, the split method will always come out faster than the regex method, though this is not really noticeable even for fairly large text corpora. You'll probably be fine using either.

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: Do not rely on these benchmarks as your final decision. Instead, test them out yourself to determine which one is the best fit for your specific use case.

 </div>
 </div>
 </div>
 <h2 id="conclusion">Conclusion</h2>
In this article, we learned about two standard methods for calculating the number of occurrences of substrings in a string. We also benchmarked the results, noting that it doesn't really matter which approach you take as long as it works for you.

In this tutorial, learn how to count the number of substrings/strings within another string using the split() method and Regular Expressions (regex), with and without strict matching and case sensitivity.

JavaScript: How to Count the Number of Substring Occurrences in a String

<h2 id="introduction">Introduction</h2>
Calculating the square root of a number is one of the common operations we do in computer science. This simple mathematical function finds its use in all areas of programming - be it in algorithms or any other mathematical model we wish to represent, we'll most likely use square roots in some way.
<blockquote>
There are many ways in which we can calculate the square root of a number in Java, but the main topic of this article is the <code>sqrt()</code> method from the <code>Math</code> class.
</blockquote>
<h2 id="themathclassinjava8">The Math class in Java 8</h2>
The <code>Math</code> class contains methods for performing a variety of basic numeric operations such as logarithmic, square root, min and max, trigonometric functions etc. However, as stated earlier, the topic of this article is the <code>sqrt()</code> method implemented within this class. The <code>sqrt()</code> method has the following syntax:
<pre><code class="hljs">public static double sqrt(double a)
</code></pre>
It's a pretty straightforward method, taking in a single <code>double</code> and returning a <code>double</code> as well. The method itself returns the correctly rounded positive square root of a <code>double</code> value. There are, however, a few special cases that require our attention while using this method:
<ul>
<li>If the argument is <code>NaN</code> or less than <code>0</code>, then the result is <code>NaN</code>.</li>
<li>If the argument is positive infinity, then the result is positive infinity.</li>
<li>If the argument is negative infinity, then the result is <code>NaN</code>.</li>
<li>If the argument is positive <code>0</code> or negative <code>0</code>, then the result is the same as the argument given.</li>
</ul>
Otherwise, the result is the <code>double</code> value closest to the true mathematical square root of the argument value. There really isn't much more to discuss with this method, so we can jump straight into an example:
<pre><code class="hljs">double positiveNumberSqrt = Math.sqrt(137.4); //11.721774609674084
double negativeNumberSqrt = Math.sqrt(-137.4); // NaN
double invalidValueSqrt = Math.sqrt(0.0/0.0); // NaN
double positiveInfSqrt = Math.sqrt(Double.POSITIVE_INFINITY); // Infinity
double negativeInfSqrt = Math.sqrt(Double.NEGATIVE_INFINITY); // NaN
double positiveZeroSqrt = Math.sqrt(0.0); // 0.0
double negativeZeroSqrt = Math.sqrt(-0.0); // -0.0
</code></pre>
<h2 id="conclusion">Conclusion</h2>
As you've seen in this short article, we used the <code>Math.sqrt()</code> method to showcase just how simple it is to find the square root of a number in Java. Of course, this isn't the only way to find the square root of a number in Java, but it's certainly the most elegant and the easiest one. We've also discussed the <code>Math</code> class a bit, which is also filled with a variety of mathematical functions that can fulfill the needs of most of our needs when it comes to math-related concepts.

In this short guide, learn how to calculate the square root of a number in Java.

Math.sqrt - Square Root in Java

<h2 id="introduction">Introduction</h2>
When working with forms in JavaScript, you'll typically need to convert form data to a JavaScript object (JSON) in order to populate an array, database, local storage, send it to an API, or even consume the data in your application. Conversion between form data and JSON is one of the most common ways to process form data as it opens doors to a plethora of other uses for that data.
<blockquote>
In this article, we'll take a look at how to easily convert form data into a JavaScript object without installing any unnecessary dependencies. We'll achieve that just by using the FormData API - a built-in browser API used to get form values as JavaScript objects.
</blockquote>
<img src="https://s3.stackabuse.com/media/articles/convert-form-data-to-javascript-object-1.gif" alt="handle parse and convert form data into a javascript object or json">

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: This app is available as a demo on <a rel="nofollow noopener noreferrer" target="_blank" href="https://codepen.io/olawanlejoel/pen/oNpmGpv">CodePen</a>.

 </div>
 </div>
 </div>
 Let's get started by creating a simple HTML form containing several common form fields - two input fields, a text area, and a submit button:
<pre><code class="hljs">&lt;form&gt;
 &lt;div class=&quot;form-control&quot;&gt;
 &lt;label for=&quot;name&quot;&gt;Full Name&lt;/label&gt;
 &lt;input id=&quot;name&quot; name=&quot;name&quot; type=&quot;text&quot; /&gt;
 &lt;/div&gt;
 &lt;div class=&quot;form-control&quot;&gt;
 &lt;label for=&quot;email&quot;&gt;Email Address&lt;/label&gt;
 &lt;input id=&quot;email&quot; name=&quot;email&quot; type=&quot;email&quot; /&gt;
 &lt;/div&gt;
 &lt;div class=&quot;form-control&quot;&gt;
 &lt;label for=&quot;message&quot;&gt;Enter a Message&lt;/label&gt;
 &lt;textarea id=&quot;message&quot; name=&quot;message&quot; rows=&quot;6&quot; cols=&quot;65&quot;&gt;&lt;/textarea&gt;
 &lt;/div&gt;
 &lt;button class=&quot;btn&quot; type=&quot;submit&quot;&gt;Send&lt;/button&gt;
&lt;/form&gt;
</code></pre>
Now, we can take a look at how to convert its data into JSON (JavaScript Object Notation) using FormData API.
<h2 id="formdataapi">FormData API</h2>
FormData is a built-in browser API that provides us a way to easily access any field from a HTML form. The first step in using FormData API is to obtain the form element using some of the appropriate HTML DOM methods - <code>document.querySelector()</code> or <code>document.getElementById()</code>. After that, we can add an event listener that calls <code>callbackFunction</code> when it registers a <code>submit</code> event on the form:
<pre><code class="hljs">const form = document.getElementById(&#x27;contact-form&#x27;);

form.addEventListener(&#x27;submit&#x27;, callbackFunction);
</code></pre>
For the event listener to work, we must define the function that will handle the <code>submit</code> event. For now, let's just make it create the <code>FormData</code> object and log its content into console:
<pre><code class="hljs">function callbackFunction(event) {
 event.preventDefault();
 const myFormData = new FormData(event.target);
 console.log(myFormData);
}
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: We used the <code>preventDefault()</code> to prevent the form from reloading after the submit button is clicked - which is the default behavior. This is a sensible default, but for the sake of illustration in our app - we'll prevent it and display the data on the right-hand div.

 </div>
 </div>
 </div>
 When you run the code above, the result will be an empty object, which is not what we've expected:
<pre><code class="hljs">FormData {}
</code></pre>
Even though it may seem like we've created an empty object, that is not the case. That <code>FormData</code> object has a key-value pair for each field in our form - therefore, we need to iterate over all those pairs and store them in a separate object. After that, we can use that object to access each individual field of our form.
There are two major ways we can get data from the FormData API - one is to loop through every key-value pair, and the other is to use the <code>Object.fromEntries()</code> method.
<h2 id="howtoconvertformdatatojsonwithloops">How to Convert Form Data to JSON With Loops</h2>
The first way to create a readable object from a <code>FormData</code> object is to iterate over its key-value pairs and manually add keys and values to the newly created object. For the purpose of this article, we'll use the <code>forEach()</code> loop in JavaScript. First of all, we'll create an empty object and then iterate over the <code>FormData</code> object we've created in the previous section:
<pre><code class="hljs">const formDataObj = {};
myFormData.forEach((value, key) =&gt; (formDataObj[key] = value));
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: The <code>forEach()</code> method is not <code>async</code> friendly, if you need your callback function to support <code>async</code> calls - you should use the <code>for-of</code> loop.

 </div>
 </div>
 </div>
 At this point we can modify the <code>callbackFunction()</code> from the previous section so that it correctly outputs the form data as an object:
<pre><code class="hljs">const form = document.getElementById(&#x27;contact-form&#x27;);

form.addEventListener(&#x27;submit&#x27;, callbackFunction);
 
function callbackFunction(event) {
 event.preventDefault();
 const myFormData = new FormData(event.target);

 const formDataObj = {};
 myFormData.forEach((value, key) =&gt; (formDataObj[key] = value));
 console.log(formDataObj);
});
</code></pre>
Now, when we fill out our form and click the submit button we should have the following output:
<pre><code class="hljs">{
 &quot;name&quot;: &quot;John Doe&quot;,
 &quot;email&quot;: &quot;john@gmail.com&quot;,
 &quot;message&quot;: &quot;Hello World&quot;
}
</code></pre>
This object has field names as its keys and corresponding field values as its values.
<h2 id="howtoconvertformdatatojsonwithobjectfromentries">How to Convert Form Data to JSON With Object.fromEntries()</h2>
Alternatively, we can use the <code>Object.fromEnteries()</code> method instead of loops to retrieve form fields from the <code>FormData</code> object. That way we don't need to create an empty object before we start - the method allows us to directly convert the <code>FormData</code> object to the corresponding JavaScript object:
<pre><code class="hljs">const formDataObj = Object.fromEntries(myFormData.entries());
</code></pre>
At this point, our modified callback function will look like this:
<pre><code class="hljs">const form = document.getElementById(&#x27;contact-form&#x27;);

form.addEventListener(&#x27;submit&#x27;, callbackFunction);
function callbackFunction(event) {
 event.preventDefault();
 const myFormData = new FormData(event.target);

 const formDataObj = Object.fromEntries(myFormData.entries());
 console.log(formDataObj);
});
</code></pre>
An object populated using <code>Object.fromEnteries()</code> will have names of the form fields as its keys and corresponding form values as its values:
<pre><code class="hljs">{
 &quot;name&quot;: &quot;John Doe&quot;,
 &quot;email&quot;: &quot;john@gmail.com&quot;,
 &quot;message&quot;: &quot;Hello World&quot;
}
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: For both methods, we can use <code>JSON.stringify()</code> to convert the object into a JSON string, which we can then use to send JSON encoded data to APIs.

 </div>
 </div>
 </div>
 <h2 id="howtogetmultipleselectedvaluesinjsonwiththeformdataapi">How to Get Multiple Selected Values in JSON With The FormData API</h2>
The above methods are compatible with almost all form fields - input text, number, radio, select... However, there are other fields that can be a bit more tricky to work with. The most notable one is the checkbox - it allows multiple values to be selected. But the previously shown methods will replace all of those selected values with just one - which is ultimately stored in the resulting object. Let's take a look at how to solve that and store all selected values in the resulting object. Suppose we have an HTML form with a checkbox field:
<pre><code class="hljs">&lt;!-- --&gt;

&lt;div class=&quot;form-control-2&quot;&gt;
 &lt;p class=&quot;group-label&quot;&gt;Your favorite pet:&lt;/p&gt;
 &lt;input type=&quot;checkbox&quot; name=&quot;favorite_pet&quot; value=&quot;Cats&quot; /&gt;Cats
 &lt;input type=&quot;checkbox&quot; name=&quot;favorite_pet&quot; value=&quot;Dogs&quot; /&gt;Dogs
 &lt;input type=&quot;checkbox&quot; name=&quot;favorite_pet&quot; value=&quot;Birds&quot; /&gt;Birds
&lt;/div&gt;

&lt;!-- --&gt;
</code></pre>
We can get all the selected data into an array using the <code>getAll()</code> method on the <code>FormData</code> object:
<pre><code class="hljs">formDataObj.favorite_pet = myFormData.getAll(&#x27;favorite_pet&#x27;);
</code></pre>
At this point, our code will look something like this:
<pre><code class="hljs">const form = document.getElementById(&#x27;contact-form&#x27;);

form.addEventListener(&#x27;submit&#x27;, callbackFunction);
function callbackFunction(event) {
 event.preventDefault();
 const myFormData = new FormData(event.target);

 const formDataObj = Object.fromEntries(myFormData.entries());
 formDataObj.favorite_pet = myFormData.getAll(&#x27;favorite_pet&#x27;);
 console.log(formDataObj);
});
</code></pre>
And the populated object will contain an array of values a user selected in the checkbox field:
<pre><code class="hljs">{
 &quot;name&quot;: &quot;uhuk&quot;,
 &quot;email&quot;: &quot;hukhhk@jf.ff&quot;,
 &quot;message&quot;: &quot;jgghhjb&quot;,
 &quot;favorite_pet&quot;: [
 &quot;Cats&quot;,
 &quot;Birds&quot;
 ]
}
</code></pre>

 <div class="alert alert-note">
 <div class="flex">
 
 <div class="flex-shrink-0 mr-3">
 <img src="/assets/images/icon-information-circle-solid.svg" class="icon" aria-hidden="true" />
 </div>
 
 <div class="w-full">
 Note: You can check out this <a rel="nofollow noopener noreferrer" target="_blank" href="https://codepen.io/olawanlejoel/pen/oNpmGpv">live demo on CodePen</a> which uses all the major form field types and generates the data as a JavaScript object when submitted.

 </div>
 </div>
 </div>
 <h2 id="conclusion">Conclusion</h2>
In this article, we've taken a look at how to use the FormData API to convert form data to JavaScript objects without any additional dependencies. We've also learned how to correctly handle various types of form fields (inputs, text-areas, etc.), as well as some trickier ones such as checkboxes.

In this guide, learn how to convert form data to JSON (JavaScript objects) with the built-in FormData API and no external dependencies, with practical code and best practices.