Js: Sort array of objects by it's value

Question

So I have an array of objects with some meals.

example:

    const meals = [
{
    id: 1,
    title: 'Strawberry Salad with Poppy Seed Dressing',
    img: 'Strawberry-Salad-with-Poppy-Seed-Dressing.jpg',
    book: 1,
    calories: 298,
    servings: 3,
    type: 'lunch',
    price: 15,
    cook: 'Jenny Jefferson',
    quantity: 10,
},
{
    id: 2,
    title: 'Cashew Turkey Salad Sandwiches',
    img: 'turkey-sandwich.jpg',
    book: 2,
    calories: 198,
    servings: 2,
    type: 'lunch',
    price: 9,
    cook: 'Jenny Jefferson',
    quantity: 10
}];

Now I need to be able to sort on id, title, img, book, calories, servings, type, price, cook, quality.

I'm doing this with a dropdown where i'm loading these items

    function loadDropdownFilter() {
let sortby = document.querySelector("#sortby");
let i = 0;
let filterObj = Object.getOwnPropertyNames(meals[i]);
while (i < filterObj.length) {
    sortby.innerHTML += `<option>${filterObj[i]}</option>`;
    i++;
}
    }

The code of my dropdown:

        <label for="search">Search</label><input type="search"   name="search" id="search"/>
        <label>Sort items by
            <select id="sortby" name="sortby">
            </select>
        </label>

        <select id="direction" name="direction">
            <option value="asc">ascending</option>
            <option value="desc">descending</option>
        </select>

    </form>
    <div id="mealList">
        <div class="flexcontainer" id="fillMealList"></div>
    </div>

I already made a new function to sort but i'm stuck in this.

The function

    function sortByObject(){
let value = document.querySelector("#sortby");
let getValueOfObject = value.options[value.selectedIndex].text;
console.log(getValueOfObject);
meals.sort();
console.log(meals);

    }

I tried to display these into my HTML but it doesn't work.

My code:

let sortValue = document.querySelector("#sortby").value;
console.log(sortValue);
meals.sort(function(a, b) {
    if (a[sortValue] < b[sortValue]) {
        return -1;
    }
    return 1;
});
console.log(meals);

let id = 1;
for (let i = 0; i < meals.length; i++) {
    let item = meals.find(item => item.id === id);
    document.querySelector("#fillMealList").innerHTML =
        `<article class='createPopup'>
            <h3>${item.title}</h3>
            <figure>
            <img src='images/${item.img}'>
            <figcaption>
            Meal by:<span>${item.cook}</span>
            </figcaption>
            </figure>
            <div class='info'>
            <p>€ <span>${item.price}</span>/pp</p>
            <a href='javascript:addToCart(${item.id})' class='addToCart'>Order</a>
            </div>
            </article>`;
    id++;
}

you can pass a function that accepts two parameters in the `.sort()` function, and from that you can use whatever field you would like. i.e. `let field='title'; meals.sort((a,b)=> {if (a[field] < b[field]) return -1; else return 1;})` — Jhecht, Dec 22 '18 at 20:43
Sorting doesn't change the IDs of the meals, just their positions in the array. Try replacing `meals.find(item => item.id === id)` with just `meals[i]`, and it should work. (Oh, and you can then get rid of the unused `id` variable, too.) — Ilmari Karonen, Dec 23 '18 at 19:45

Jack Bashford · Accepted Answer · 2018-12-22T21:24:59.087

1

I made a function to pass into your .sort() statement, and a few more improvements:

function sortByObject(){
    let sortValue = document.querySelector("#sortby").value;
    console.log(sortValue);
    meals.sort(function(a, b) {
        if (a[sortValue] < b[sortValue]) {
            return -1;
        } 
        return 1;
    })
    console.log(meals);
    meals.forEach(meal => console.log(meal.title));
    var display = document.getElementById("fillMealList");
    meals.forEach(meal = display.innerHTML += meal.title + "<br>");
}

Hopefully this helps!

edited Dec 22 '18 at 21:24

answered Dec 22 '18 at 20:52

Jack Bashford

43,180
11
50
79

Thankyou this worked! Now I need to display the title of the meal. Can you help me with that too? – Agrevia Dec 22 '18 at 21:12
No problem whatsoever - edited code in question now to `console.log()` the title of the first meal, which is the one that got sorted to the top. – Jack Bashford Dec 22 '18 at 21:14
I mean I have to display the all the titles in the html and it has to change when I change the sort from ID to Title, ... – Agrevia Dec 22 '18 at 21:18
1

Oh, right. Fixed it now. – Jack Bashford Dec 22 '18 at 21:18
Thankyou! And how do I display these titles in html? See what I tried in my question above – Agrevia Dec 22 '18 at 21:22
1

I've now shown that again in my answer - this will append each title to the `
– Jack Bashford Dec 22 '18 at 21:24
Thankyou a lot! – Agrevia Dec 22 '18 at 21:25

Js: Sort array of objects by it's value

1 Answers1