How to sort prompt answer by price

I’m having a small project where I have to do a shopping list (for fruit salad) which allows user to add products and set prices for them. I’ve managed to do this so far that the “final” prompt shows all added products and prices for the user. Problem is that it should show all this from lowest to the highest by the price. I’ve tried to search information about this but haven’t found anything relevant. Is there any help for me? Thank you in advance!

var count = 0;
var fruitSaladItems = [];
var ingredient=true;

 while (ingredient && count<22) {
      count++
  
      ingredient= prompt("Enter the fruit salad ingredients");
      if(ingredient){
        var price=prompt("Enter the price");
             fruitSaladItems.push(ingredient+" €"+price);
        
      }
}

alert(fruitSaladItems.join(','));

Here you can see the edited code:

var count = 0;
var fruitSaladItems = [];
var ingredient=true;

 while (ingredient && count<22) {
      count++
  
     ingredient = prompt("Enter the fruit salad ingredients");
     if (ingredient) {
      var price = parseFloat(prompt("Enter the price"));
      fruitSaladItems.push({ ingredient, price });
      
      }
}

alert(fruitSaladItems.join(','));

Answer

The key thing that you need to do to make this problem easier is to maintain a list of objects representing the ingredients rather than a list of interpolated strings such as “apple €1.50”. When you store objects (containing the ingredient name and the price) you now have the source data in a form that is flexible and can be used for all kinds of things, such as sorting by ingredient name, sorting by price (ascending or descending), filtering on name or price, etc.

Generally, it’s better to store and manipulate data in an elemental form and only transform that into something derived such as the description “apple €1.50” at the point you need to do that.

Here’s an example that runs outside the browser and has pre-created data:

const fruitSaladItems = [];

fruitSaladItems.push({ ingredient: "grape", price: 5.2 });
fruitSaladItems.push({ ingredient: "apple", price: 3.99 });
fruitSaladItems.push({ ingredient: "orange", price: 1.3 });
fruitSaladItems.push({ ingredient: "plum", price: 1.5 });

fruitSaladItems.sort((a, b) => a.price - b.price);

const descriptions = fruitSaladItems.map(
  (item) => `${item.ingredient} €${item.price.toFixed(2)}`
);

console.log(descriptions.join(", "));

In your code, to populate the items array, you could use:

let count = 0;
const fruitSaladItems = [];
let ingredient=true;

while (ingredient && count<22) {
  count++
  ingredient = prompt("Enter the fruit salad ingredients");
  if (ingredient) {
    const price = parseFloat(prompt("Enter the price"));
    fruitSaladItems.push({ ingredient, price });
  }
}

fruitSaladItems.sort((a, b) => a.price - b.price);

const descriptions = fruitSaladItems.map(
  (item) => `${item.ingredient} €${item.price.toFixed(2)}`
);

console.log(descriptions.join(", "));