Question 245695 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Move object item up or down but keep same key and value

I have this object:

var fields =  {
    g8fdfc8: {
        label: 'Email',
        logic: []
    },

    ac1200: {
        label: 'Age',
        logic: []
    }
}

I want to move for example key and value up "ac1200", so the result should be like this:

var fields =  {
    ac1200: {
        label: 'Age',
        logic: []
    }

    g8fdfc8: {
        label: 'Email',
        logic: []
    },
}

Wonder if this can be accomplished.
I can’t find a solution even with ChatGPT.

EDIT: Basicly i am building a VUE form editor but the app was written in jquery, that json format is like that.
So i have 2 buttons, one to move a item(field) up inside the fields object.
one to move down.

Tags:

4

Answers


  1. 0 
    var fields =  {
    g8fdfc8: {
        label: 'Email',
        logic: []
    },

    ac1200: {
        label: 'Age',
        logic: []
    }
}
var val = fields['g8fdfc8'];
delete fields['g8fdfc8'];
fields.g8fdfc8 = val;
console.log(JSON.stringify(fields));
    Login or Signup to reply.
  2. 0

    Your fields would have to be an array. The order of object keys cannot be sorted.

    Now, you can use the splice method to move the ac1200 item up by by 1.

    var fields = [
  { key: 'foobar'  , value: { label: 'Name'  , logic: [] } },
  { key: 'g8fdfc8' , value: { label: 'Email' , logic: [] } },
  { key: 'ac1200'  , value: { label: 'Age'   , logic: [] } }
];

const moveUp = (data, key) => {
  const index = data.findIndex(item => item.key === key);
  if (index > 0) {
    data.splice(index - 1, 0, data.splice(index, 1)[0]);
  }
}

const moveDown = (data, key) => {
  const index = data.findIndex(item => item.key === key);
  if (index !== -1 && index < data.length) {
    data.splice(index + 1, 0, data.splice(index, 1)[0]);
  }
}

moveDown(fields, 'foobar'); // Move down by 1
moveUp(fields, 'ac1200');   // Move up by 1

console.log(fields);
    .as-console-wrapper { top: 0; max-height: 100% !important; }
    Login or Signup to reply.
  3. 0

    Avoid using object as hash arrays, use usual arrays with id fields. Objects are more difficult to handle than arrays (arrays have a bunch of methods for manipulating/transforming).

    Anyway, a generic approach would be

    1. Get keys of an object into an array
    2. Rearrange keys as you like
    3. Reduce to an object back

    Here we sort the keys alphabetically:

    var fields =  {
    g8fdfc8: {
        label: 'Email',
        logic: []
    },

    ac1200: {
        label: 'Age',
        logic: []
    }
}

fields = Object.keys(fields).sort().reduce((obj, key) => (obj[key] = fields[key], obj), {});

console.log(fields);

    If you want to change an object in-place delete fields first so they would be added to the end in sorted order:

    var fields =  {
    g8fdfc8: {
        label: 'Email',
        logic: []
    },

    ac1200: {
        label: 'Age',
        logic: []
    }
}

Object.keys(fields).sort().forEach((key, val) => (val = fields[key], delete fields[key], fields[key] = val));

console.log(fields);
    Login or Signup to reply.
  4. 0 
    const fields = {
  foo: { label: 'foo' },
  bar: { label: 'bar' },
  baz: { label: 'baz' },
  bat: { label: 'baz' },
}

function compare(v1, v2, k1, k2) {
  if (v1.label < v2.label) return -1;
  if (v1.label > v2.label) return 1;
  if (k1 < k2) return -1;
  if (k1 > k2) return 1;
  return 0
}

function sortObject(o, comp) {
  return Object.fromEntries(
    Object.entries(o)
      .sort(([k1, v1], [k2, v2]) => comp(v1, v2, k1, k2))
  )
}
const result = sortObject(fields, compare)

console.log(result)
// const result = {
//   bar: { label: 'bar' }, // bar < baz (label)
//   bat: { label: 'baz' }, // bat < baz (key)
//   baz: { label: 'baz' },
//   foo: { label: 'foo' },
// }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search