How to sort an array of objects then map through it in JavaScript?

Question

I have an array of objects of products, I'm trying to sort them on the price (Low to High) and (High to Low) and then map through the sorted array to display the product.

And I can sort it by the time to which in here referred to it by created means the time the product has been created And updated means the last time the product got modified.

the JSX in the map because I'm using reactjs.

const products = [
          {name: "keyboard",
           id: "1",
           created: 1614,
           updated: 1620,
           price: {
             raw: 1,
             formatted: "1.00",
             }
          },
          {name: "shoes",
           id: "2",
           created: 1655,
           updated: 1660,
           price: {
             raw: 2,
             formatted: "2.00",
             }
          },
          {name: "keyboard",
           id: "1",
           created: 1670,
           updated: 1670,
           price: {
             raw: 1,
             formatted: "1.00",
            }
          }
        ]
        
        
        const sortedProducts = //products after been sorted
        
        return(
          sortedProducts.map(product => 
            <div key={product.id}>
              <h1>{product.name}</h1>
              <h2>{product.price.formatted}</h2>
            </div>
        ))

score 0 · Accepted Answer · answered May 01 '21 at 22:03

You can use sort() and compare the price property value

const products = [{
    name: "keyboard",
    id: "1",
    created: 1614,
    updated: 1620,
    price: {
      raw: 1,
      formatted: "1.00",
    }
  },
  {
    name: "shoes",
    id: "2",
    created: 1655,
    updated: 1660,
    price: {
      raw: 2,
      formatted: "2.00",
    }
  },
  {
    name: "keyboard",
    id: "1",
    created: 1670,
    updated: 1670,
    price: {
      raw: 1,
      formatted: "1.00",
    }
  }
]

const sorted = products.sort((a, b) => a.price.formatted.localeCompare(b.price.formatted))

console.log(sorted);

Than you can map through the sorted array.

score 0 · Answer 2 · answered May 01 '21 at 22:04

To make it "runnable" I changed the last part back from JSX into JavaScript

const products = [
      {name: "screen",
       id: "1",
       created: 1614,
       updated: 1620,
       price: {
         raw: 1.5,
         formatted: "1.50",
         }
      },
      {name: "shoes",
       id: "2",
       created: 1655,
       updated: 1660,
       price: {
         raw: 2,
         formatted: "2.00",
         }
      },
      {name: "keyboard",
       id: "1",
       created: 1670,
       updated: 1670,
       price: {
         raw: 1,
         formatted: "1.00",
        }
      }
    ]
    
    
    const sortedProducts = products.sort((a,b)=>a.created-b.created);
    document.getElementById('here').innerHTML=sortedProducts.map(product => 
     `<div key=${product.id}>
        <h1>${product.name}</h1>
        <h2>${product.price.formatted}</h2>
      </div>`
    ).join("\n")

<div id="here"></div>

Instead of created you can fill in updated or price.raw for the other sort criteria.

How to sort an array of objects then map through it in JavaScript?

2 Answers2