Parse JSON coming from Server and reorder

Question

I'm calling an API and it's outputting a JSON (see below). I can parse through using AJAX. Was wondering though how can I...

1. Reorder the data based on the date (newest first), and then
2. Only show the first three

JSON output

{
    "beds": {
        "casper": {
            "name": "angel",
            "description": "lorem ipsum",
            "orderDate": "09/20/2018"
        },
        "tuft": {
            "name": "relax",
            "description": "lorem ipsum",
            "orderDate": "05/12/2018"
        },
        "saatva": {
            "name": "heaven",
            "description": "lorem ipsum",
            "orderDate": "07/03/2018"
        },
        "dream": {
            "name": "sweet",
            "description": "lorem ipsum",
            "orderDate": "04/28/2018"
        },
        "rocky": {
            "name": "painful",
            "description": "lorem ipsum",
            "orderDate": "02/15/2018"
        }
    }
}

Here's my code after AJAX success

$.ajax({
    ...
    ...
    ...
    success: function(result) {

        $('.container-for-beds').each(function(i) {

            $(this).prepend(
                '<div class="bedBrand"><p>' + result.beds[i].name + '</p><p>' + result.beds[i].description + '</p><p>' + result.beds[i].orderDate + '</p></div>'
            );

        });

    }
});

If everything goes well, the HTML should look like...

<div class="container-for-beds">
    <div class="bedBrand">
        <p>heaven by saatva</p>
        <p>lorem ipsum</p>
        <p>07/03/2018</p>
    </div>
    <div class="bedBrand">
        <p>relax by tuft</p>
        <p>lorem ipsum</p>
        <p>05/12/2018</p>
    </div>
    <div class="bedBrand">
        <p>angel by casper</p>
        <p>lorem ipsum</p>
        <p>04/20/2018</p>
    </div>
</div>

Thanks ahead for the insight!

Answer 1

I can parse through using AJAX

The objective of ajax is to make asynchronous call , it may not do parsing

Secondly the order of the keys in an js object is not guaranteed. Having said that , you can create a new array from this object and sort the array based on date. To get the first three object using slice method

var data = {
  "beds": {
    "casper": {
      "name": "angel",
      "description": "lorem ipsum",
      "orderDate": "09/20/2018"
    },
    "tuft": {
      "name": "relax",
      "description": "lorem ipsum",
      "orderDate": "05/12/2018"
    },
    "saatva": {
      "name": "heaven",
      "description": "lorem ipsum",
      "orderDate": "07/03/2018"
    },
    "dream": {
      "name": "sweet",
      "description": "lorem ipsum",
      "orderDate": "04/28/2018"
    },
    "rocky": {
      "name": "painful",
      "description": "lorem ipsum",
      "orderDate": "02/15/2018"
    }
  }
};
var createArray = [];
// looping the object using for..in
for (keys in data.beds) {
  var currentKey = data.beds[keys];
  // adding the nested object key name as a property 
  currentKey.parent = keys;
   // {"name": "angel","description": "lorem ipsum","orderDate": "09/20/2018","parent": "casper"}
  createArray.push(currentKey)
}
var sortedByDate = createArray.sort(function(a, b) {
  // sorting based on date, it will sort in ascending order
  //change to new Date(b.orderDate) - new Date(b.orderDate)
  // to sort in descending order
  return new Date(a.orderDate) - new Date(b.orderDate)
}).slice(0,3)
console.log(sortedByDate)