|
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:
results.map(async 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. 
for await (const filmName of getFilmNames()) {
}
Anywho, the super short answer is just go with #2 and don't forget to use promise.all on the outer nest too. 
Jeremy Falcon
|
|
|
|
|
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 ?
|
|
|
|
|
(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
|
|
|
|
|
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.
(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;
}
})();
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
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
|
|
|
|
|
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
|
|
|
|
|
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:
function createWindow () {
mainWin = new BrowserWindow({
width: 1100,
height: 870,
minWidth: 1100,
maxWidth: 1100,
minHeight: 870,
maxHeight: 870,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
}
})
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.
|
|
|
|
|
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.
|
|
|
|
|
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…
|
|
|
|
|
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.
|
|
|
|
|
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
|
|
|
|
|
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
const doStuff = input => {
return (has no prime factor larger than 5);
};
Jeremy Falcon
|
|
|
|
|
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.
|
|
|
|
|
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
|
|
|
|
|
I suspect Sami is going to die.
|
|
|
|
|
I have a textbox and dropdownlist controls inside a repeater control.
The textbox is called txt_watersizes and the dropdownlist is called ddlWater.
The dropdownlist currently has three values although this could increase. The dropdownlist values are dynamically populated from the database.
To keep things simple, I have manually added values to the dropdownlist.
This is our back office feature and is handled only by an admin.
The way it works is that if an admin wishes to create a record, s/he selects a value from the dropdownlist. If the value s/he wishes to select is not on the dropdown, s/he enters the value into the textbox. The value is then added to the lookup table storing the dropdownlist values while the ID of or value of the dropdownlist is added to the main table. This works great.
We would like to disable the textbox when the admin selects a value from the dropdownlist to avoid having to enter the same value in the textbox as well.
How do I do this?
I know I could handle this on codebehind using selectedIndexChanged method but we would use JavaScript instead.
I do have a JavaScript but for some reason, it does not disable the textbox when a value is selected from the dropdownlist.
Thank you in advance.
<script type="text/javascript">
$(function () {
$("[id*=ddlWater]").change(function () {
var row = $(this).closest("tr");
var value = $(this).val();
if (value == "" ) {
row.find("[id*=txt_watersizes]").attr("disabled", "true");
} else {
row.find("[id*=txt_watersizes]").removeAttr("disabled");
}
});
});
</script>
<td>
<asp:DropDownList ID="ddlWater" AppendDataBoundItems="true" runat="server">
<asp:ListItem Text="29.9" Value="1" />
<asp:ListItem Text="2.98" Value="2" />
<asp:ListItem Text="0.33" Value="3" />
</asp:DropDownList>
</td>
<td>
<asp:TextBox ID="txt_watersizes" runat="server"></asp:TextBox>
</td>
|
|
|
|
|
Try using prop instead of attr:
row.find("[id*=txt_watersizes]").prop("disabled", value === ""); Also note that you're disabling the textbox when the selected value is empty. Based on your description, I suspect you want to disable it when the selected value is not empty.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hello everyone
I have a purchase order that works great.
But so that the user can have a better experience, I would like to replace the select which is used to choose the quantity of articles by buttons + and -
But I am facing a small problem which is the recovery of the elements of my article.
Indeed for the moment, when I choose a quantity with the select this quantity is overlapped by the function changeQte (element)
Then when I click on the add to cart button, I retrieve the different data from "ajouter au panier" button
So this whole part, I got it right
Once an item is in the cart, I can modify its quantity with a plus or a minus
So I know the objects exist in my code to make it, that is.
ajouter_produit_dans_panier
And
enlever_produit_de_panier
It would therefore suffice that I add two buttons with clicks + and - to replace the select
Yes, but here is how to manage the data elements at this time
data-name="Item 1" data-price="1.10" data-qty="1"
I give you my codpen code, it's easier for the test
<a href="https://codepen.io/flexi2202/pen/poOeOgv">https://codepen.io/flexi2202/pen/poOeOgv</a>[<a href="https://codepen.io/flexi2202/pen/poOeOgv" target="_blank" title="New Window">^</a>]
Ah yes, I already deleted the select and the add to cart button and replace with my buttons
|
|
|
|
|
Good morning
In my code in javascript I would like to trigger a pop up in javascript
But without click and without ID
In a place of my code, I have a condition and in this condition, I would like to open a popup if the condition is true
To facilitate, I give you my code
<a href="https://codepen.io/flexi2202/pen/rNZeQBw">https:
|
|
|
|
|
Don't.
Unsolicited popups are vile, evil design patterns promoted by spammers and people trying to milk the cash cow of the Internet by opening up a kiddie Shopify store, etc. They have very little place in a professional design and instantly devalues the site's perception.
If you're trying to distract the user from their action by showing an ad, newsletter signup, etc. consider at the very least a partial overlay that stands out but doesn't completely obstruct the user.
Jeremy Falcon
|
|
|
|
|
hello I have a problem I have a purchase order with 500 items, in this example I only put 3 items
When I add an item to the cart I would like to be able to display the panel div but just for the item that was put in the cart with the ajouter au panier button
But when I click on retirer du panier I want the button to disappear
<pre> <a data-nom="2001" class="btn btn-primary ajouter-panier b-items__item__add-to-cart" onclick="myFunction();">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a><br>
</div>
<a data-nom="2002" class="btn btn-primary ajouter-panier b-items__item__add-to-cart" onclick="myFunction();">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a><br>
</div>
<a data-nom="2003" class="btn btn-primary ajouter-panier b-items__item__add-to-cart" onclick="myFunction();">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a>
<pre lang="Javascript">function myFunction() {
var a = document.querySelectorAll(".panel[style*='display:none']");
console.log ("display",a)
a[0].style.display ='block';
}
function myFunction2() {
var b = document.querySelectorAll(".panel[style*='display:block']");
console.log ("display",b)
b[0].style.display ='none';
}
|
|
|
|
|
With the specified markup, the only way to identify the correct panel is to loop through the sibling elements until you find it:
<a data-nom="2001" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a><br>
</div>
<a data-nom="2002" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a><br>
</div>
<a data-nom="2003" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a>
</div>
document.addEventListener("click", e => {
let el = e.target;
if (el.tagName !== "A") { el = el.closest("a"); }
if (!el || !el.classList.contains("b-items__item__add-to-cart")) { return; }
e.preventDefault();
let panel = el.nextElementSibling;
while (panel && panel.tagName !== "DIV"){
panel = panel.nextElementSibling;
}
if (panel) {
panel.style.display = "block";
}
}); Demo[^]
If you can change the markup structure so that each link and panel have a wrapper element, then it becomes slightly easier:
<div class="item-card">
<a data-nom="2001" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a><br>
</div>
</div>
<div class="item-card">
<a data-nom="2002" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a><br>
</div>
</div>
<div class="item-card">
<a data-nom="2003" class="btn btn-primary ajouter-panier b-items__item__add-to-cart">
ajouter au panier
</a><br>
<div class="panel" style="display:none">
<a data-qte2="0" class=" ajouter-panier ">
retirer panier
</a>
</div>
</div>
document.addEventListener("click", e => {
let el = e.target;
if (el.tagName !== "A") { el = el.closest("a"); }
if (!el || !el.classList.contains("b-items__item__add-to-cart")) { return; }
const card = el.closest(".item-card");
if (!card) { return; }
const panel = card.querySelector(".panel");
if (!panel) { return; }
e.preventDefault();
panel.style.display = "block";
}); Demo[^]
In either case, it's best to avoid the onclick attribute, and wire up the event handlers in code. In this case, I've used event delegation[^], which is generally more efficient than adding handlers to multiple elements, and also allows the code to handle events on elements which are added to the DOM at some later time.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
thank you for the answer and the help, it's appreciated
this works perfectly fine to display "retirer panier"
But how to hide "retirer panier"
when you click on "retirer panier"
modified 21-Feb-23 6:21am.
|
|
|
|
|
With the original markup:
const showPanel = el => {
let panel = el.nextElementSibling;
while (panel && panel.tagName !== "DIV"){
panel = panel.nextElementSibling;
}
if (panel) {
panel.style.display = "block";
}
};
const hidePanel = el => {
const panel = el.closest(".panel");
if (panel) {
panel.style.display = "none";
}
};
document.addEventListener("click", e => {
let el = e.target;
if (el.tagName !== "A") { el = el.closest("a"); }
if (!el) { return; }
if (el.classList.contains("b-items__item__add-to-cart")) {
e.preventDefault();
showPanel(el);
} else if (el.classList.contains("ajouter-panier")) {
e.preventDefault();
hidePanel(el);
}
});Demo[^]
With the modified markup:
document.addEventListener("click", e => {
let el = e.target;
if (el.tagName !== "A") { el = el.closest("a"); }
if (!el || !el.classList.contains("ajouter-panier")) { return; }
const card = el.closest(".item-card");
if (!card) { return; }
const panel = card.querySelector(".panel");
if (!panel) { return; }
e.preventDefault();
if (el.classList.contains("b-items__item__add-to-cart")) {
panel.style.display = "block";
} else if (el.classList.contains("ajouter-panier")) {
panel.style.display = "none";
}
}); Demo[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
a very big thank you, really thank you for this code
on first try it works great
I'm going to do a bigger test.
I'll keep you informed
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
