1

I know dealing with Objects in Javascript is difficult to predict the order of items, but is there a way to organise days of the week in order, and not so they are alphabetical in React or vanilla JS...

I want to know if it's possible to take a given React Object model like this:

       this.state = {
            days: {
                friday: {
                     temperature: 34
                 },
                monday: {
                     temperature: 28
                 },
                 tuesday: {
                     temperature: 29
                 }
                 
             }
        }

To return in day order, like this:

    this.state = {
        days: {
             monday: {
                 temperature: 28
             },
             tuesday: {
                 temperature: 29
             },
             friday: {
                 temperature: 34
             }
             
         }
    }

I am intrigued as I am having a tough time to believe there's not an out of the box way, without using Arrays etc.

Many thanks for your opinion / help on this :)

Wisdom1
  • 129
  • 1
  • 6
  • non numeric properties used to be (may have changed) ordered by order if creation ... i.e. `var x = {}; x.sunday = 1; x.monday =1; x.tuesday=1; console.log(Object.keys(x));` ... I think the object keys would come out in that order – Bravo Nov 16 '20 at 11:50
  • Does this answer your question? [Sort JavaScript object by key](https://stackoverflow.com/questions/5467129/sort-javascript-object-by-key) – usafder Nov 16 '20 at 11:50

3 Answers3

2

Non numeric properties are enumerated in the order in which they are created

So to "force" the order, you could do something like:

var x = {
  days: {
    sunday: 7,
    monday: 1,
    tuesday: 2,
    wednesday: 3,
    thursday: 4,
    friday: 5,
    saturday: 6
  }
};
const getValues = (o, k) => k.reduce((a, n) => ({ ...a,
  [n]: o[n]
}), {});

console.log(x.days);

x.days = getValues(x.days, ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']);

console.log(x.days);

However, it's probably never a good idea to depend on the order of keys in an object - refactor the code that accesses the object to access the keys in the defined order you want

var x = {
  days: {
    sunday: 7,
    monday: 1,
    tuesday: 2,
    wednesday: 3,
    thursday: 4,
    friday: 5,
    saturday: 6
  }
};
['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
.forEach(k => 
    console.log(k, x.days[k])
);
Bravo
  • 6,022
  • 1
  • 10
  • 15
2

You could solve it using Array.prototype.sort method. First sort the days and then use Array.prototype.reduce method to make your required object.

const data = {
  days: {
    friday: {
      temperature: 34,
    },
    monday: {
      temperature: 28,
    },
    tuesday: {
      temperature: 29,
    },
  },
};
const days = {
  sunday: 1,
  monday: 2,
  tuesday: 3,
  wednesday: 4,
  thursday: 5,
  friday: 6,
  saturday: 7,
};
const ret = Object.keys(data.days)
  .sort((x, y) => days[x] - days[y])
  .reduce(
    (prev, c) => {
      const p = prev;
      p.days = { ...p.days, [c]: data.days[c] };
      return p;
    },
    { days: {} }
  );
console.log(ret);
mr hr
  • 3,162
  • 2
  • 9
  • 19
1

You just change your value structure and follow this code here

let mystate = {
    days : [
    {
      day: 'friday',
      temperature: 34
    },
    {
      day: 'monday',
      temperature: 28
    },
    {
      day:'tuesday',
      temperature: 29
    }
  ]
};

console.log(mystate.days.sort((a,b)=>a.temperature-b.temperature))
Md. Abu Sayed
  • 2,396
  • 2
  • 18
  • 26
  • also follow this link for help: https://codesandbox.io/s/winter-morning-ijb44, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort – Md. Abu Sayed Nov 16 '20 at 12:20