JS - How to move a JSON object's item to another position

Question

I'm using JQuery sortable to reorder JSON object's items into a JSON array. So let's pretend I have a JSON file that looks like this:

[
    {
        "ID_id": "I3Y0RAmsr5",
        "DT_createdAt": "2020-12-02T14:39:24",
        "DT_updatedAt": "2020-12-02T14:39:42",
        "ST_text": "first",
        "NU_number": 1,
    },
    {
        "ID_id": "vL3cmiVvQv",
        "DT_createdAt": "2020-12-02T14:39:45",
        "DT_updatedAt": "2020-12-02T14:40:03",
        "ST_text": "second\n",
        "NU_number": 2,
    }
]

This is my code to get an array of moved keys:

// fetch data from Users.json
$data = file_get_contents('Users.json');
$data_array = json_decode($data, true);    

    <ul class="ui-sortable" id="sortableColumns">
     <?php foreach($data_array[0] as $k => $v) { ?>
       <li class="ui-sortable-handle" id="<?php echo $k ?>"><?php echo $k ?><i class="fas fa-grip-lines"></i></li>
    <?php } ?>
    </ul>
    
   <script>
     $(function () {
       $('#sortableColumns').sortable({ update: function(event, ui) {
         var newOrderArray = $(this).find('li').map(function(i, el) {
            return $(el).attr('id');
         }).get()
         getJsonTableData(newOrderArray);
         }
       });
    });
     


    function getJsonTableData(newOrderArray) {
          console.log('newOrderArray: ' + newOrderArray);
          $.getJSON('Users.json', function (jsonData) {
             $.each(jsonData, function(j, obj){
               
// HERE I GUESS I NEED TO USE SOME CODE TO REORDER MY OBJECT'S ITEMS AND UPDATE THE Users.json FILE...

             });
          });
        }
  </script>

The console log I get after moving, for instance, the ID_id element to the bottom, is:

newOrderArray: DT_createdAt,DT_updatedAt,ST_text,NU_number,AR_array,ID_id

So, what I need to do now is to edit the jsonData array to look like this:

[
        {
            "DT_createdAt": "2020-12-02T14:39:24",
            "DT_updatedAt": "2020-12-02T14:39:42",
            "ST_text": "first",
            "NU_number": 1,
            "ID_id": "I3Y0RAmsr5" // -> key moved from to to bottom
        },
        {
            "DT_createdAt": "2020-12-02T14:39:45",
            "DT_updatedAt": "2020-12-02T14:40:03",
            "ST_text": "second\n",
            "NU_number": 2,
            "ID_id": "vL3cmiVvQv" // -> key moved from to to bottom
        }
    ]

And, of course, I need to update my Users.json file as shown above.

i dont understand why you want to reorder your json..its just what you want to display you want to reorder? so you just adapt the visual, could you display your html? — Frenchy, Dec 03 '20 at 09:18
I have a database based on JSON files, so what I want to do is to give users the possibility to reorder the table columns, and since the table is static, I'm using jQuery sortable to reorder the column names and then I need to process the JSON file with the new keys order, save it an reloasd the page so that columns are shown in the selected order. Hope it helps — Frank Eno, Dec 03 '20 at 09:20
Yes, it's my own backend, https://xserver.app if you want to check it out. Anyway, I simply need to update my JSON file based on the sorted columns (the keys) names. — Frank Eno, Dec 03 '20 at 09:29
yes i suppose you have lot of records, so you want to save the new visual or the user has to rebuild each time? — Frenchy, Dec 03 '20 at 09:32
It's not just about adjusting the visual order of columns, I need to rebuild the JSON file accordingly to the order of the keys, because they also can download it and it must have the key:value order they set on my website — Frank Eno, Dec 03 '20 at 09:34
Yes, i just haven’t posted it in the json example. That’s not important, I would just need to know if there’s a way to move objects items to different positions, even in php with an ajax call — Frank Eno, Dec 03 '20 at 10:26

Frenchy · Accepted Answer · 2020-12-03T10:38:12.813

1

Yes you could change the order of json with JSON.stringify:

var $data_array = [
    {
        "ID_id": "I3Y0RAmsr5",
        "DT_createdAt": "2020-12-02T14:39:24",
        "DT_updatedAt": "2020-12-02T14:39:42",
        "ST_text": "first",
        "NU_number": 1,
    },
    {
        "ID_id": "vL3cmiVvQv",
        "DT_createdAt": "2020-12-02T14:39:45",
        "DT_updatedAt": "2020-12-02T14:40:03",
        "ST_text": "second\n",
        "NU_number": 2,
    }
];



var newOrderArray= ["DT_createdAt","DT_updatedAt","ST_text","NU_number","ID_id"];

var newjson = JSON.stringify( $data_array, newOrderArray);
var newarray = JSON.parse(JSON.stringify( $data_array, newOrderArray));

console.log(newjson);
console.log(newarray);

edited Dec 03 '20 at 10:38

answered Dec 03 '20 at 10:32

Frenchy

16,386
3
16
39

Hi @Frenchy, I have a weird issue using that code for values that have the ‘&’ as character in a string value, if I launch that code, the json gets null and erases all key:values. Any idea why that happens? – Frank Eno Jan 14 '21 at 12:38
1

its normal its problem of encoding: replace "&" by %26 or use https://stackoverflow.com/questions/18707854/proper-way-to-handle-the-ampersand-character-in-json-string-send-to-rest-web-ser – Frenchy Jan 14 '21 at 16:10
you could encode the value: encodeURIComponent(value), $.get("/?act=" + value,(data).. – Frenchy Jan 29 '21 at 18:50

JS - How to move a JSON object's item to another position

1 Answers1