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, May 30 '19 at 18:58
now this view.html?_ijt=72t9n4ls8vjcs5g7minkkcai31:28 Uncaught (in promise) TypeError: data.forEach is not a function — Hasitha, May 30 '19 at 19:35

score 1 · Accepted Answer · edited May 30 '19 at 19:07

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 '19 at 19:07

brooksrelyt

3,925
5
31
54

answered May 30 '19 at 18:36

Mitro

268
2
8

This should be a comment, not an answer. – Get Off My Lawn May 30 '19 at 18:37
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. – Mitro May 30 '19 at 18:47
I checked the api using postman and it worked fine. Is that okay ? – Hasitha May 30 '19 at 19:00
Im seeing thin in chrome console Uncaught SyntaxError: Unexpected token < 8Unchecked runtime.lastError: The message port closed before a response was received. – Hasitha May 30 '19 at 19:03
Can you open network tab in the chrome dev tools? Here you can check more info about response from the server. – Mitro May 30 '19 at 19:16
https://stackoverflow.com/questions/54126343/how-to-fix-unchecked-runtime-lasterror-the-message-port-closed-before-a-respon Check out these solutions and see if might help you. – Mitro May 30 '19 at 19:22
Request URL: https://cr-input.mxpnl.net/data?_channel_id=&_partner_id=39571&_sub_id=0000&_app_version=1.0.23&_app=cs-dca Request Method: POST Status Code: 200 Remote Address: 52.72.99.240:443 Referrer Policy: no-referrer-when-downgrade – Hasitha May 30 '19 at 19:30
good idea. i checked and above comment is what I saw. sure I will check – Hasitha May 30 '19 at 19:30
opend the page using incognito. and received following in chrome console view.html?_ijt=72t9n4ls8vjcs5g7minkkcai31:28 Uncaught (in promise) TypeError: data.forEach is not a function – Hasitha May 30 '19 at 19:34
Hmm, check the value of the data before doing foreach. It looks like data is not an array, maybe it's an object? You can check it with console.log(data); – Mitro May 30 '19 at 19:37
aaah since Im using MongoDb it saves data as an object . So that might be the issue here ? – Hasitha May 31 '19 at 03:50

Trying to fetch data from an api using javascript

1 Answers1