Trying to fetch data from an api using javascript

Question

I'am trying to fetch data from a online MongoDb database using javascript and html. but it doesn't work properly. Also using jquery library too

<div>
    <input type="submit" value="GET DATA FROM API" id="getAPI">
    <div id="result" ></div>
    <div ><h2>Input Form</h2></div>
    <form id="postData" >
    </form>
</div>
<!-- javascript part -->
<script>
    document.getElementById('getAPI').addEventListener('click', getAPI);
    function getAPI() {
        fetch('http://localhost:3000/api/seller')
            .then((res) => { return res.json() })
            .then((data) => {
                let result = `<h2> Random User Info From Jsonplaceholder API</h2>`;
                data.forEach((seller) => {
                    const {id, name, email} = seller
                    result +=
                        `<div>
                                <h5> User ID: ${id} </h5>
                                <ul>
                                    <li> User Full Name : ${name}</li>
                                    <li> User Email : ${email} </li>
                                </ul>
                             </div>`;
                    document.getElementById('result').innerHTML = result;
                });
            })
    }
</script>

<script src="jquery-3.3.1.min.js" type="text/javascript"></script>

this can be seen in the chrome console view.html:1 Unchecked runtime.lastError: The message port closed before a response was received. view.html:1 Unchecked runtime.lastError: The message port closed before a response was received. — Hasitha
– Hasitha, Commented May 30, 2019 at 18:58
now this view.html?_ijt=72t9n4ls8vjcs5g7minkkcai31:28 Uncaught (in promise) TypeError: data.forEach is not a function — Hasitha
– Hasitha, Commented May 30, 2019 at 19:35

brooksrelyt · Accepted Answer · 2019-05-30 19:07:03Z

1

fetch("https://jsonplaceholder.typicode.com/users")
  .then(res => {
    return res.json();
  })
  .then(data => {
    let result = `<h2> Random User Info From Jsonplaceholder API</h2>`;
    data.forEach(seller => {
      const {
        id,
        name,
        email
      } = seller;
      result += `<div>
                   <h5> User ID: ${id} </h5>
                   <ul>
                     <li> User Full Name : ${name}</li>
                     <li> User Email : ${email} </li>
                   </ul>
                 </div>`;
      document.getElementById("app").innerHTML = result;
    });
  });

<div id="app"></div>

Your Front End works well. I replaced the api url in your code and everything is fine. It might be something on the Back End. Did you check the status code that you get from the server?

edited May 30, 2019 at 19:07

brooksrelyt

4,0536 gold badges36 silver badges58 bronze badges

answered May 30, 2019 at 18:36

Mitro

2782 silver badges8 bronze badges

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

11 Comments

Get Off My Lawn Over a year ago

This should be a comment, not an answer.

Mitro Over a year ago

Yes, but I can't execute code example inside the comments and by the code example, there is nothing to change on the FE side.

Hasitha Over a year ago

I checked the api using postman and it worked fine. Is that okay ?

Hasitha Over a year ago

Im seeing thin in chrome console Uncaught SyntaxError: Unexpected token < 8Unchecked runtime.lastError: The message port closed before a response was received.

Mitro Over a year ago

Can you open network tab in the chrome dev tools? Here you can check more info about response from the server.

|

Collectives™ on Stack Overflow

Trying to fetch data from an api using javascript

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related