Sending object to a function, getting wrong order

Question

I made a function where I am sending JSON. Then I used console.log to view it. My code is

function json($data) {
  console.log($data);
} 

json({
  "first_name": "First Name",
  "last_name": "Last Name",
  "phone": "Phone",
  "orgname": "Organisation Name",
  "email": "Email",
  "1": "Sign-up Date"
});

In the console.log($data); I receive the output like this:

{
  1: "Sign-up Date", 
  first_name: "First Name", 
  last_name: "Last Name", 
  phone: "Phone", 
  orgname: "Organisation Name", 
  email: "Email"
}

However I need it like this

{
  first_name: "First Name", 
  last_name: "Last Name", 
  phone: "Phone", 
  orgname: "Organisation Name", 
  email: "Email", 
  1: "Sign-up Date"
}

The problem is that instead of console.log I'm actually using this code:

$.each($data, function(index, value) {
    $(".custom_fields_with_names").append('<option value="' + index + '">' + value + '</option>');
});

and am getting the options in the wrong order (with "1" coming first).

When you were asking your question, there was a big orange **How to Format** box to the right of the text area with useful information in it. There was also an entire toolbar of formatting aids. And a **[?]** button giving formatting help. *And* a preview area located between the text area and the Post Your Question button (so that you'd have to scroll past it to find the button, to encourage you to look at it) showing what your post would look like when posted. Making your post clear, and demonstrating that you took the time to do so, improves your chances of getting good answers. — T.J. Crowder, Apr 25 '18 at 09:42
You cannot reorder the properties of an object. You also cannot rely on them being in the same order when worked with. If you need to have data in a specific order, use an array instead. — Rory McCrossan, Apr 25 '18 at 09:42
@T.J.Crowder I had to so I could understand what was actually being asked — Rory McCrossan, Apr 25 '18 at 09:43
Although JavaScript objects *do* have an order (as of ES2015; and your example `console.log` with the `1` property first is using that order), the order is **not important** in virtually any situation. What makes you think you need the object in a particular order? — T.J. Crowder, Apr 25 '18 at 09:43
U can use Object.keys to get *array* of keys, order them in desired way and then operate with it. Iterate by ordered key but take values from object. — Drag13, Apr 25 '18 at 09:45
Your objects that are returned are the same and the order doesn't really matter here since you access the value by a given key. However, maybe it's worth looking at `Map` introduced in ECMAScript 2015 — Sudheesh Singanamalla, Apr 25 '18 at 09:45
Nobody's going to mention how `json` is a terrible function name? — Anthony, Apr 25 '18 at 09:49
*"I made a function where I am sending a json"* No, you're sending an object. JSON is a *textual notation* for data exchange. [(More here.)](http://stackoverflow.com/a/2904181/157247) If you're dealing with JavaScript source code, and not dealing with a *string*, you're not dealing with JSON. — T.J. Crowder, Apr 25 '18 at 09:50
Technically he could send the function anything, since it just logs the argument passed to it. — Anthony, Apr 25 '18 at 09:52
`const sort=o=>Object.keys(o).sort().reduce((p,c)=>(p[c]=o[c],p),{}) console.log(sort(obj))` Do you mean this? — 3142 maple, Apr 25 '18 at 09:52
@3142maple and how this should give possibility to keep desired object's keys order? — Drag13, Apr 25 '18 at 09:54
Hey Actually after the console.log I am using ` $.each($json, function(index, value) { $(".custom_fields_with_names").append(''); });` to append the values in select box — Lakshya, Apr 25 '18 at 09:55
If you're using it to create an option list like you're describing, you definitely want a Map ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map ) — Anthony, Apr 25 '18 at 09:59

score 1 · Accepted Answer · answered Apr 25 '18 at 10:02

From your comment:

Hey Actually after the console.log I am using $.each($json, function(index, value) { $(".custom_fields_with_names").append('<option value="'+index+'">'+value+'</option>'); }); to append the values in select box

That indicates you want to maintain order. If so, don't use an object. While JavaScript objects do have an order (now, as of ES2015), using it is almost never the right thing to do, and as you've noticed, the order they have is not the order you want (specifically: property names that qualify as integer indexes are listed first, in numeric order, and then remaining properties are listed in creation order [if we only consider "own" properties]).

Instead, provide the data to your function in an ordered structure such as an array:

json([
  {name: "first_name", value: "First Name"},
  {name: "last_name", value: "Last Name"},
  {name: "phone", value: "Phone"},
  {name: "orgname", value: "Organisation Name"},
  {name: "email", value: "Email"},
  {name: "1", value: "Sign-up Date"}
]);

and then

$.each($data, function(index, entry) {
    $(".custom_fields_with_names").append('<option value="' + entry.name + '">' + entry.value + '</option>');
});

I've used $.each because you did, but of course you could use $data.forEach(function(entry) {... instead. I've also only used ES5-level features as there wasn't any indication in your question that you're using ES2015+ features.

Thanks, for explaining every reason behind it. Much Appreciated — Lakshya, Apr 25 '18 at 10:10

Sending object to a function, getting wrong order

1 Answers1