JavaScript

[Learning/Beginner] Confused about await, async and fetch.

15-May-23 5:25

More like "How do I get banned for spam as quickly as possible?" Smile | :)

Spammer in JavaScript forum (Tammy Gombez)[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Maximilien2-May-23 3:09

Re: [Learning/Beginner] Confused about await, async and fetch.

2-May-23 3:09

Still learning.

I'm using the SWAPI - The Star Wars API for my test data.

I can fetch the data from https://swapi.dev/api/people (no problem)

But I'd like to be able to iterate over the films array to fetch each movie name.

I'm not sure what the syntax I should use, or if it is the proper way to do it.

the getFilmName function returns

[object Promise]

I tried adding an await before the call to getFilmName and give does not "compile" :

const filmName = await getFilmName(filmURL);

Thanks.

async function getFilmName(url) {
  const res = await fetch(url);
  const data = await res.json();
  return data.title;
}

async function getPeople() {
  console.log("fetchNames");
  // get list of people.
  const url = "<a href="https://swapi.dev/api/people">https://swapi.dev/api/people</a>";
  const res = await fetch(url);
  const data = await res.json();

  console.log(data);

  const results = data.results;

  // loop all people
  results.map((person) => {
    console.log(<code>${person.name} stars in :</code>);
    // loop all films for each person
    person.films.map((filmURL) => {
      console.log(filmURL);
      const filmName = getFilmName(filmURL);
      console.log(<code>filmName: ${filmName}</code>);
    });
  });
}

getPeople();

Thanks.

CI/CD = Continuous Impediment/Continuous Despair

Jeremy Falcon2-May-23 5:07

Re: [Learning/Beginner] Confused about await, async and fetch.

2-May-23 5:07

Maximilien wrote:
I tried adding an await before the call to getFilmName and give does not "compile" :

The calling function would also have to be asynchronous or called within the context of a promise.

JavaScript

async function blah() {
  try {
    // protocol in URL removed because of syntax coloring bug
    const response = await fetch('blah.com');
    return await response.json();
  } catch(ex) {
    console.error(ex);
  }
}

// if you call blah synchronously, it will not work
blah(); // problem

// call it from another async routine, thenable promise, or an async IIFE
(async () => {
  await blah(); // works
})();

Jeremy Falcon

Maximilien2-May-23 10:27

Re: [Learning/Beginner] Confused about await, async and fetch.

2-May-23 10:27

Thanks, but that does not help with my example.

My problem is with the getFilmName function (or the call to).

CI/CD = Continuous Impediment/Continuous Despair

Richard Deeming2-May-23 22:33

Re: [Learning/Beginner] Confused about await, async and fetch.

2-May-23 22:33

Jeremy is correct - any function that uses await needs to be marked as async.

In this case, the callback to map would need to be async. However, that would result in an array of promises.

But since you're not doing anything with the array returned from either map call, that won't make much difference.

Assuming you actually want to do something with the results, try:

JavaScript

async function getPeople() {
    console.log("fetchNames");
    const url = "https://swapi.dev/api/people";
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
    
    const results = data.results;
    
    const promises = results.map(async (person) => {
        const filmPromises = person.films.map(getFilmName);
        const films = await Promise.all(filmPromises);
        return { person, films };
    });
    
    return await Promise.all(promises);
}

(async () => {
    const people = await getPeople();
    people.forEach(person => {
        console.log(`${person.person.name} stars in :`);
        person.films.forEach(filmName => console.log(filmName));
    });
})();

Demo[^]
Promise.all() - JavaScript | MDN[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Maximilien3-May-23 2:41

Re: [Learning/Beginner] Confused about await, async and fetch.

3-May-23 2:41

Thanks,

I'll study this.

I'm not sure I still understand.

Rose | [Rose]

CI/CD = Continuous Impediment/Continuous Despair

Jeremy Falcon3-May-23 10:13

Re: [Learning/Beginner] Confused about await, async and fetch.

3-May-23 10:13

I'll help you with the array of promises part, but not until I get a thumbs up too. Laugh | :laugh:

Jeremy Falcon

Maximilien3-May-23 12:56

Re: [Learning/Beginner] Confused about await, async and fetch.

3-May-23 12:56

I promise I will. Thumbs Up | :thumbsup:

CI/CD = Continuous Impediment/Continuous Despair

Jeremy Falcon4-May-23 4:47

json and json-server with weird be valid json file.

4-May-23 4:47

Richard is spot on with his reply. Mine was more theory. Take it as a compliment. Sometimes I just chat theory when I recognize the poster because I trust they take it and run with it. It's still the same principle, but just needs to be called from within the context of an Array.prototype.map callback. There are a couple ways to go about this.

1 You can still use an async IIFE anyway. IIFE is a functional/JavaScript concept that stands for Immediately-Invoked Function Expression and is pronounced iffy. It does exactly what it says and can be put anywhere. It's a quick and dirty way to call async code from a sync routine as well.

2 You can make the map callback itself async. However, this means you'd also have to deal with sync/async issue still.... just "one level" higher so to speak. Array.prototype.map iterates, much like IEnumerable in C#. In JavaScript, async/await is essentially syntax sugar for promises. Makes life easier and for cleaner code. But it also means you can interchange them and loop through your nested map like this:

JavaScript

// this level needs a promise.all too
results.map(async person => {
  // loop all films for each person
  await Promise.all(arr.map(async filmURL => {
    const filmName = await getFilmName(filmURL);
  }));
};

Keep in mind though, this simply shifts the requirement for async up one nested level. The parent map would still have to be called within the context of a promise or async/await still. Same exact syntax. Keep in mind though, using Promise.all is old. It works, but no cool points for using it.

As a side note, this is mainly for educational purposes. An API shouldn't be called in a loop. Redesigning the API, using GraphQL, streaming the data, etc. should all be considerations to rethink the approach of opening web requests in a loop.

Buttttt.... if you need a loop-like concept, you'd be better off with generators. For example, if you used generators, you'd be able to pull off something like this. Just trying to whet your appetite. Smile | :)

JavaScript

for await (const filmName of getFilmNames()) {
  // so fancy and clean
}

Anywho, the super short answer is just go with #2 and don't forget to use promise.all on the outer nest too. Laugh | :laugh:

Jeremy Falcon

Axios

darlina1-May-23 22:47

darlina

1-May-23 22:47

I'm trying to show progrees bar while uploading a file using axios, according to this youtube channel : OpenJavaScript("Axios upload progress with progress bar tutorial"). If I use 'https://httpbin.org/post' for the axios post parameter it run well, but if I change to my destination folder (D:\laragon-portable\www\cv\public\uploads) it result with error 'POST http://localhost:8080/uploads 404 (Not Found)', I tried 'http://localhost:8080' and 'http://localhost:8080/uploads'(I use local development server in CodeIgniter 4), but it error too,....what should I write for the url ?

Maximilien21-Apr-23 2:17

Re: json and json-server with weird be valid json file.

21-Apr-23 2:17

(not sure where to ask this).

Still learning...not for work.

I have a valid json (geojson) file like this : (reduced for visibility, original : Murales subventionnées - Site web des données ouvertes de la Ville de Montréal )
it's a list of features but the id is in a sub field of the feature.

{
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id": 1,
        "annee": "2007"
      },
      "geometry": { "type": "Point", "coordinates": [-73.622218, 45.58041] }
    },
    {
      "type": "Feature",
      "properties": {
        "id": 2,
        "annee": "2007"
      },
      "geometry": { "type": "Point", "coordinates": [-73.558029, 45.506855] }
    }
  ]
}

I can fetch the whole list with the following and it works :

fetch ("http://localhost:4000/features );

I'm trying to use fetch to get a single "feature" from the file:

fetch ("http://localhost:4000/features/1");

But this does not work, it returns nothing.

I tried different format for the fetch URL.

If I move the id property to the root of each item, it works, but I don't want to do that.

Am I missing something ?

Is there anything I can do ?

Thanks.

CI/CD = Continuous Impediment/Continuous Despair

Richard Deeming21-Apr-23 2:32

Re: json and json-server with weird be valid json file.

21-Apr-23 2:32

fetch sends a request to the server, and returns the response. It doesn't attempt to interpret the response and extract any part of it.

Unless you have a specific endpoint on the server to handle the request for a single feature, you'll need to fetch the full list and parse it yourself.

JavaScript

(async () => {
    const response = await fetch("http://localhost:4000/features");
    if (!response.ok) {
        alert("Error loading the feature list.");
        return;
    }
    
    const { features } = await response.json();
    const specificFeature = features.find(f => f.properties.id === 1);
    if (!specificFeature) {
        alert("Feature 1 was not found.");
        return;
    }
    
    // Do something with the feature here...
})();

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Maximilien21-Apr-23 4:15

Re: json and json-server with weird be valid json file.

21-Apr-23 4:15

thanks,
I'll probably do it manually.

but I don't understand who/what creates those end points.

for example, if I have this simple json file:

{
    "items": [{
            "id": 1
        },
        {
            "id": 2
        },
        {
            "id": 2
        }
    ]
}

I can fetch individual items with http://localhost:3000/items/1

but if I have :

{
    "items": [{
            "properties":{
            "id": 1
        }

        },
        {
            "properties":{
                "id": 2
            }
            },
        {
            "properties":{
                "id": 3
            }
            }
    ]
}

it does not work.

CI/CD = Continuous Impediment/Continuous Despair

Richard Deeming21-Apr-23 5:37

Application is "dead" when I open it in a browser

21-Apr-23 5:37

You need to look at the code that's running on your server. As far as I'm aware, there's no magic tool that would convert a URL like "/items/1" into a request to load a JSON file called "items", get the "items" property from the root object, find the entry with id === 1, and return just that object. You must have code running which does that, which you (or someone else) has written.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

arnold_w16-Mar-23 23:23

arnold_w

16-Mar-23 23:23

My colleague, who is on vacation, wrote a Javascript application that I need to port to C#. I know nothing about Javascript so at this point I'm happy if I'm just able to execute it successfully. There is a file called "index.html" and when I open this in Chrome I can see buttons, textboxes, comboboxes, etc but everything is "dead" , nothing happens when I e.g. click a button. Does anybody know how I can bring the application to life? Also, does anybody know if there exist a free IDE where I can edit the source code (it would be a bonus if I can step the code as well)?

Updated information: I installed "Visual Studio Code" and opened the project folder there and when I click "Start Debugging" I see the GUI flashing by quickly and then nothing happens. In the "Terminal" window I see the following:
"npm run start
Debugger attached.

> firmwareprogrammer@1.0.0 start
> electron .

Debugger attached.

Main process started
Waiting for the debugger to disconnect...
Waiting for the debugger to disconnect..."

Updated information again: I'm now able to step the code in "Visual Studio Code" and when the following function is executed, the GUI-windows are showing (but they are all white), but as soon as the function is finished executing the GUI-windows disappear:

JavaScript

function createWindow () {
  mainWin = new BrowserWindow({
    width: 1100,
    height: 870,
    minWidth: 1100,
    maxWidth: 1100,
    minHeight: 870,
    maxHeight: 870,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
//      preload: path.join(__dirname, "preload.js")
    }
  })

//  mainWin.removeMenu();
//  win.loadFile('index.html')
//require("@electron/remote/main").enable(win.webContents);
//mainWin.webContents.openDevTools()
devtools = new BrowserWindow();
mainWin.webContents.setDevToolsWebContents(devtools.webContents)
mainWin.webContents.openDevTools({ mode: 'detach' })
  
mainWin.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file',
      slashes: true
  }))
  mainWin.webContents.openDevTools()
  mainWin.on('close', () => {
    mainWin = null;
  })
}

modified 17-Mar-23 9:07am.

Re: Application is "dead" when I open it in a browser

jschell5-Apr-23 6:30

jschell

5-Apr-23 6:30

No idea where to start with this.

A javascript "application" is not the same as a "web server" which responds to requests and which might use javascript.

So at least from your description it is not clear that you know what it is.

If it is a web server then, of course, the first step is that you either must set up a web server or have something that will act as a container (proxy) to run it as though it was in a web server.

If it is an application instead then it has nothing to do with a browser.

A 'index.html' suggests a web application. Hard to say how you might run this but I know that can be used in IIS with the appropriate AppPool (and other stuff set up). Then IIS is the web server. With my very limited experience node.js might be set up in a similar way. There are other ways this can be setup.

Regardless though it likely requires additional steps besides just identifying the container.

------------------------------------------------------------------

Other than the above your company has a SEVERE problem with documentation. This is not something that you should be guessing about. What if your coworker just left the company (fired, quit, died) then what?

Production setups should ALWAYS be documented. Development setups should be documented in such a way that it does not require another developer working full time just to get a new developer up and running. Detail helps but it not required.

Javascript Form Validation - Help needed

Kobraz11-Mar-23 12:43

Kobraz

11-Mar-23 12:43

I'm studying Front-End Development and I try to Validate this form: https://rfh-js1.netlify.app/contact.html

The validation script is: https://rfh-js1.netlify.app/js/validation.js

I have tried to set 4 global variables (value = 0) first on validation.js, then Im doing the validation in 4 separate functions and set the variable to 1 if validation rules is succsessful and 0 if they fail.

Then after validation I sum the values of these global variables and set the submit-button to display if sum = 4 else display="none"

but logging the global variable in console.log only give me 0…

JavaScript

Member 159403612-Mar-23 17:42

Member 15940361

2-Mar-23 17:42

There are positive number which has no prime factor larger than 5

So the first few numbers are 1, 2, 3, 4, 5, 6, 8, 9, 10

Write a function which takes a positive number as input and returns true if it has no prime factor larger than 5

The return type should be a boolean.
isPrimeFactorLargerThanFive(10) Should return true
isPrimeFactorLargerThanFive(13) should return false
The answer should be valid for any given input.

Re: JavaScript

Richard Deeming2-Mar-23 21:24

2-Mar-23 21:24

No.

Nobody here is going to do your homework for you.

Try harder. If you don't know where to start, then talk to your teacher.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: JavaScript

Jeremy Falcon8-Mar-23 12:57

8-Mar-23 12:57

Member 15940361 wrote:
Write a function which takes a positive number as input and returns true if it has no prime factor larger than 5

JavaScript

const doStuff = input => {
  // something cool should be done with the input
  return (has no prime factor larger than 5);
};

Jeremy Falcon

JavaScript

Member 159403612-Mar-23 17:40

Member 15940361

2-Mar-23 17:40

Sami's spaceship crashed on Mars! She sends a series of SOS messages to Earth for help.

Letters in some of the SOS messages are altered by cosmic radiation during transmission. Given the signal received by Earth as a string, s, determine how many letters of Sami's SOS have been changed by radiation.

For example, Earth receives SOSTOT. Sami's original message was SOSSOS. Two of the message characters were changed in transit.

Function Description:

Complete the marsExploration function in the editor below. It should return an integer representing the number of letters changed during transmission.

marsExploration has the following parameter(s):

s: the string as received on Earth


Return type should be a number.
marsExploration("SOSSOT") should return 1
marsExploration("SSOSSPSSQSSOR") should return 9
The answer should be valid for any given input.

Re: JavaScript

Richard Deeming2-Mar-23 21:24