0

I want to fetch data from JSON object which is on my localhost . ..This might be really stupid question but I am beginner in JS.

and is there any other way to fetch data ??

  fetch('http://localhost:3000/show')
     .then(result => {
          console.log(result);
          return result.json();
      });
      .then(data => {
         console.log(data);
      });
      .catch(error => {
          console.log(error);
      });

this http://localhost:3000/show contains json objects. it has retrieved data from mongoose.

Improve this question
4
  • Are you asking how to display as tables? If so, what have you tried? Commented Nov 30, 2018 at 5:26
  • @openwonk I am unable to fetch data, once i am able to fetch data i willl do it. Commented Nov 30, 2018 at 5:30
  • Can you be more clear on your question? From where are you trying to fetch JSON Object? What is running on "localhost:3000"? What is returned from endpoint "/show" when you hit it from your browser? Commented Nov 30, 2018 at 5:45
  • @Sreehari Login page is running on my localhost:3000. JSON object is returning from endpoint /show. Commented Nov 30, 2018 at 5:57

2 Answers 2

Reset to default
3

Remove the semicolons between each .then call.

Promises use a kind of "monadic" pattern: each method on a promise returns another promise, which has the same API. This means you can chain promise methods indefinitely.

So:

fetch()
.then(/* stuff */)
.then(/* more stuff */)
.catch(/* even more stuff */); // <-- this is the only semicolon

The same is true of many Array methods, so you'll often see code like this:

Object.keys( someObj )            // returns an array
.map(/* iterator function */)     // Array.map returns an array
.filter(/* iterator function */)  // Array.filter returns an array
.sort(/* comparator function */); // Array.sort returns an array

Again, only one semicolon is needed, because each step of the statement produces an array, and JS lets you anticipate that.

If that doesn't help, you might want to post the error you're getting.

I should add that result.json() will throw if the server at http://localhost:3000/show fails to provide the HTTP header Content-Type: application/json. Even if the response body is entirely valid JSON, the HTTPResponse class refuses to do .json() if the server doesn't state that the content is json.

Also, if this code is running in a browser, and is served from a different host (or port), you will need to do CORS stuff. See https://stackoverflow.com/a/48287868/814463 for possible help.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

after removing semicolons and i have a typo error in the catch block, do you mind to change the code and post it ??
Remove every semicolon. All of them. Then it should work. If it still doesn't, you have a different problem. My guess is that your local server is not returning the proper Content-Type HTTP header, although I can't say for sure if you don't say what error you're getting.
TypeError: Failed to fetch => this is what console is showing. Anyway Thank you man
i had not installed a package called cors. After installing it , i could fetch data.
0

If your endpoint '/show' returns the json data without any issue, then the below code should console you the json response.

fetch('http://localhost:3000/show')
.then(res => {
     console.log(result);
     return res.json()
)}
.then(json => console.log(json))
.catch(err => console.log(err));
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.