JS - 如何将 JSON 对象的项目移动到另一个位置

Posted 2023-05-08

【中文标题】JS - 如何将 JSON 对象的项目移动到另一个位置

【英文标题】：JS - How to move a JSON object's item to another position

【发布时间】：2021-03-15 04:49:22

【问题描述】：

我正在使用可排序的 JQuery 将 JSON 对象的项目重新排序为 JSON 数组。所以让我们假设我有一个如下所示的 JSON 文件：

[
    
        "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,
    
]

这是我获取移动键数组的代码：

// 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>

我在将ID_id元素移动到底部后得到的控制台日志是：

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

所以，我现在需要做的是将jsonData 数组编辑为如下所示：

[
        
            "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
        
    ]

当然，我需要更新我的Users.json 文件，如上所示。

【问题讨论】：

我不明白你为什么要重新排序你的 json ..它只是你想要显示的你想要重新排序？所以你只是调整视觉，你能显示你的html吗？

我有一个基于 JSON 文件的数据库，所以我想做的是让用户可以重新排序表列，并且由于表是静态的，我使用 jQuery sortable 重新排序列名，然后我需要使用新的键顺序处理 JSON 文件，将其保存为重新加载页面，以便列以所选顺序显示。希望对你有帮助

你可以访问服务器的代码吗？

是的，这是我自己的后端，xserver.app 如果您想查看的话。无论如何，我只需要根据已排序的列（键）名称更新我的 JSON 文件。

是的，我想你有很多记录，所以你想保存新的视觉效果或者用户每次都必须重建？

【参考方案1】：

是的，您可以使用 JSON.stringify 更改 json 的顺序：

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

【讨论】：

嗨@Frenchy，我有一个奇怪的问题，使用该代码作为字符串值中具有“&”作为字符的值，如果我启动该代码，json 将变为空并删除所有键：价值观。知道为什么会这样吗？

正常的编码问题：用%26替换"&"或者使用***.com/questions/18707854/…

你可以对值进行编码：encodeURIComponent(value), $.get("/?act=" + value,(data)..