Frank Eno
Frank Eno

Reputation: 2649

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

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>

enter image description here

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.

Upvotes: 1

Views: 1358

Answers (1)

Frenchy
Frenchy

Reputation: 17027

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);

Upvotes: 1

Related Questions