Uncaught Typeerror: Cannot Read Property of Undefined Json
Resolving the JavaScript Promise Error "TypeError: Cannot Read 'So' of Undefined"
Introduction
Working with JavaScript Hope comes with its own assortment of errors, and a popular one is
TypeError: Cannot read holding 'so' of undefined.
In this guide, we volition cover two lawmaking examples containing a bugs that crusade this TypeError and so refactor the code to resolve the issue.
Case 1
Say you lot have the office getTaxAmount(price, taxRate) . Information technology takes 2 arguments, price and taxRate , calculates the amount of tax using the inputs, and is expected to return a Promise that resolves to the calculated tax amount.
Next, call getTaxAmount() function with two arguments and log the returned value on the panel.
ane const getTaxAmount = ( price , taxRate ) => { 2 Math . flooring ( ( toll * taxRate ) / 100 ) ; iii } ; four 5 getTaxAmount ( 100 , 12 ) . and then ( ( taxAmount ) => console . log ( taxAmount ) ) ; js
If you run this buggy code on your browser console or using Node CLI, you will get this error:
ane TypeError: Cannot read holding 'and so' of undefined sh
Case ii
Here'south another example. getGithubOrgs(url) is a part that takes a URL and uses Fetch API to get GitHub organization data for a given user(deekshasharma). fetch() makes a network request to the destination URL and returns a Promise that resolves to a response object. The response is and then parsed into a JSON. This function is expected to return a Promise that should resolve to JSON information.
The getGithubOrgs() function is then chosen with an statement containing a valid URL and logs the resulting JSON on the panel.
one function getGithubOrgs ( url ) { 2 fetch ( url ) . then ( ( response ) => response . json ( ) ) ; three } 4 v getGithubOrgs ( 6 "https://api.github.com/users/deekshasharma/orgs" 7 ) . then ( ( jsonData ) => console . log ( jsonData ) ) ; js
When you run this code in the browser console, you will get an error:
ane TypeError: Cannot read belongings 'and so' of undefined sh
What Causes This TypeError
TypeError - Cannot read property 'and so' of undefined is thrown when the caller is expecting a Promise to be returned and instead receives undefined . Let's consider the higher up examples.
In Example 1, the getTaxAmount(toll, taxRate) function, when called, should have returned a Hope that resolves to a value of 12 . Currently this part simply calculates the taxation corporeality using the ii inputs and does not return a value. Hence, the undefined value is returned.
In Case 2, the getGithubOrgs(url) function calls the Fetch API, which returns a Promise that resolves to a response object. This resulting Promise is received by the and so() method, which parses the response to JSON using the json() method. Finally, then() returns a new Promise that resolves to JSON. Merely you may have noticed there is no return statement inside the getGithubOrgs(url) function, which means the resulting Promise from the then() method is never returned to the calling code.
How to Fix This Error
To resolve the issue in both lawmaking examples, you'll need to refactor the functions. Let's look at them one by 1.
Example 1
The office getTaxAmount() should exist refactored to the lawmaking below.
Promise.resolve() returns a resolved Promise with the value of the tax amount calculated past the role. And then the calling code will ever receive a Promise every bit long equally valid arguments were passed.
1 const getTaxAmount = ( price , taxRate ) => { 2 return Promise . resolve ( Math . floor ( ( price * taxRate ) / 100 ) ) ; three } ; 4 five getTaxAmount ( 100 , 12 ) . then ( ( taxAmount ) => console . log ( taxAmount ) ) ; js
Run this code on your browser console or Node CLI, and y'all should go an ouput of 12 .
Example 2
The function getGithubOrgs(url) should exist refactored to include a render statement and then that a Promise can be returned to the caller.
one function getGithubOrgs ( url ) { 2 render fetch ( url ) . then ( ( response ) => response . json ( ) ) ; three } iv v getGithubOrgs ( "https://api.github.com/users/deekshasharma/orgs" ) . then ( ( res ) => 6 console . log ( res ) 7 ) ; js
Decision
Whenever y'all see this TypeError while working with JavaScript Promise, the first step is to audit the lawmaking that was expected to return a Promise . After all, you go this error when calling the then() method on a Promise . And the TypeError indicates yous are calling then() on undefined , which is a hint that the Promise itself is undefined . The adjacent step is to go and debug the lawmaking to effigy out why a Promise is not returned. We looked at two unlike lawmaking examples to run into what can potentially cause this error and how to resolve it.
Yous tin read more than nigh Promise.then() on MDN.
Source: https://www.pluralsight.com/guides/javascript-promise-typeerror:-cannot-read-then-of-undefined
0 Response to "Uncaught Typeerror: Cannot Read Property of Undefined Json"
Post a Comment