Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When syncing with an underscored backend, convert to CamelCase for use in JavaScript?

TL/DR: What's a good way to use an underscored naming convention serverside (RoR) with a camelCased naming convention clientside (JS)

Server-side programming environments like Ruby on Rails use underscored variables. Conventionally, JavaScript uses camelCased variables. This is problematic when sending data from the client to the server.

For example, consider sending user information to the client. There may be a property in the database called num_times_ordered, yet in JavaScript you'd traditionally want to refer to this as numTimesOrdered.

Has anyone come up with an elegant way of dealing with this? Here are some options, none particularly nice:

  1. Convert data to camelCase when fetched from server.
  2. Use camelCase when sending it from the server
  3. Use an underscored naming convention in your Javascript (although then you're inconsistent with any third party libraries, like jQuery)
  4. Use a camelCased naming convention on your backend (although then you're inconsistent with your backend's conventions)

I'm leaning towards #3, and using underscores in my JavaScript. It'll look weird when I use camelCased third party libraries, though.

like image 485
Geoff Avatar asked Aug 19 '12 18:08

Geoff


People also ask

Does JavaScript use camelCase or underscore?

camelCase is used by JavaScript itself, by jQuery, and other JavaScript libraries. Do not start names with a $ sign. It will put you in conflict with many JavaScript library names.

Why is camelCase used in JavaScript?

When multiple words are used to form a variable, camel case joins those words together, without any white space, and delineates the start of each new word with a capital letter.

When should camelCase be used?

CamelCase is a way to separate the words in a phrase by making the first letter of each word capitalized and not using spaces. It is commonly used in web URLs, programming and computer naming conventions. It is named after camels because the capital letters resemble the humps on a camel's back.


1 Answers

I believe ember.js (via Ember Data) takes approach #1: converting underscored JSON to camelCase on the client-side when fetched; and doing the reverse before posting back to the server.

I've been working on a small library that performs these conversions: https://github.com/domchristie/humps, allowing you to do things like:

// GET
$.ajax({
  url: '/posts',
  dataType: 'json',
  success: function(data, status, xhr) {
    data = humps.camelizeKeys(data);
  }
});

// POST
$.ajax({
  type: 'POST',
  url: '/posts'
  dataType: 'json',
  data: humps.decamelizeKeys({
    title: "Foo",
    publishedAt: "2012-09-03T21:35:46.068Z"
  })
});
// Sends: { title: "Foo", published_at: "2012-09-03T21:35:46.068Z" }

I should add, it has not been heavily tested, but contributions welcome!

like image 99
Dom Christie Avatar answered Sep 28 '22 10:09

Dom Christie