排序时保留 JSON 数组

【问题标题】：Preserve JSON arrays while sorting排序时保留 JSON 数组
【发布时间】：2016-10-18 04:47:50
【问题描述】：

我有两个来自外部网站的 JSON 数组。我对这两个数组进行排序和合并，对它们进行解码，然后按 ID 从高到低排序。

目前，当单击“字母”选项时，?sort=alphabetical 会添加到 URL 的末尾，当页面完成重新加载时，JSON 数组会再次被解码和合并。

这不是我想要的结果：我不希望在单击该选项时再次解码和合并 JSON 数组 - 我只是希望按字母顺序对已解码和合并的 JSON 数组进行排序。

数组：

$homepage = array();  

$homepage[]= '{  
   "info":{  
      "collection":[  
         {  
            "Name":"Charlie",
            "ID":"7"
         },
         {  
            "Name":"Emma",
            "ID":"9"
         }
      ]
   }
}';  

$homepage[] = '{  
   "info":{  
      "collection":[  
         {  
            "Name":"Bob",
            "ID":"5"
         }
      ]
   }
}';

排序：

$data = array();
foreach ($homepage as $homepage2) {
    $tmp=json_decode($homepage2, false);
    $data = array_merge($data,$tmp->info->collection);
}

if(!empty($_GET['sort']) && $_GET['sort'] == 'alphabetical') {
    usort($data, function ($a, $b) {
        return strcmp($a->Name, $b->Name);
    });
}else{
    usort($data, function ($a, $b) {
        return $b->ID - $a->ID;
    });
}

echo'
<select onchange="location.href = this.value;">
    <option value="example.php?sort=alphabetical">Alphabetical</option>
</select>
';

foreach($data as $key) {
    echo'
    <a href="test.com">
    <p>'.$key->ID.'</p>
    <p>'.$key->Name.'</p>
    </a>
    ';
}

【问题讨论】：

  • 你能重新表述一下这个问题吗？我似乎无法破译你的意思。
  • @TheCodesee 如果你想在不刷新的情况下更改页面的内容，你几乎肯定需要编写一些 JavaScript 来执行此操作 - 除非你想向服务器创建另一个请求并替换内容页面。
  • 请问您为什么不想再次解码/合并 JSON 字符串数组？这不是一个大的性能问题，避免这种情况的唯一方法是将解码/合并的数据存储在某个地方（如 PHP 会话或 DB），但这似乎只会带来更多问题。
  • @Sam 好问题。正如我在帖子中提到的，我从外部 url 获取 json 数据（我在这个问题中发布了一个 json 文件的示例，以使其更容易理解）。我担心如果我发出太多请求，服务器会阻止我。
  • 您能否给出输出ID 和Name 值的确切方式？我不认为你只是在没有 HTML 的情况下输出它们？基于 Javascript 的解决方案需要知道您将它们放入的确切 HTML 结构。

标签： javascript php arrays json sorting


【解决方案1】：

这个答案有几种选择，所以我将提出一个简单的选择：

如果用户没有选择，则发送已排序的数据，默认数据。然后，设置一个函数，根据需要对数据进行排序，并重新绘制表格/div/无论您使用什么来呈现它们。

举个简单的例子：

function sortAlpha(){
   for each (stuff in data){
      document.getElementById("aTable").textContent=data.StringRepresentation;
   }
}

然后是sortSize，sortEtc等的函数......在每个函数中，您清除一个div内容，并再次填充它。这样，您无需从服务器请求新内容

getElementById documentation

【讨论】：

  • 是的，JS 是最好的（如果不使用数据库来存储数据，那真的是唯一的）解决方案。
【解决方案2】：

您可以使用 JavaScript 对点击进行排序，而仅使用 PHP 将 JSON 传递给它。

在您提供要在其中显示列表的 HTML 结构后，我更新了此答案以使用 div 元素作为记录和 p 元素作为字段。

我们可以用两个按钮替换select 列表，用于选择排序顺序。

这是 PHP 代码：

<?php

$homepage = array();  

$homepage[]= '{  
   "info":{  
      "collection":[  
         {  
            "Name":"Charlie",
            "ID":"13"
         },
         {  
            "Name":"Emma",
            "ID":"9"
         }
      ]
   }
}';  

$homepage[] = '{  
   "info":{  
      "collection":[  
         {  
            "Name":"Bob",
            "ID":"10"
         }
      ]
   }
}';

$data = array();
foreach ($homepage as $homepage2) {
    $tmp=json_decode($homepage2, false);
    $data = array_merge($data,$tmp->info->collection);
}

?>

<div id="container"></div>

<button id="sort1">Alphabetical</button>
<button id="sort2">High to Low</button>

<script>
    var collection = <?=json_encode($data)?>;

    function populate(compareFunc) {
        collection.sort(compareFunc);
        var container = document.getElementById('container');
        container.innerHTML = '';
        collection.forEach(function (key) {
            var div = document.createElement("div");
            div.className = "inventory";
            var span = document.createElement("span");
            span.textContent = key.ID;
            div.appendChild(span);
            span = document.createElement("span");
            span.textContent = key.Name;
            div.appendChild(span);
            container.appendChild(div);
        });
    }

    var populateById = populate.bind(null, function (a, b) {
        return a.ID - b.ID;
    });

    var populateByName = populate.bind(null, function (a, b) {
        return a.Name.localeCompare(b.Name);
    });

    document.getElementById("sort1").addEventListener('click', populateByName);
    document.getElementById("sort2").addEventListener('click', populateById);
    document.addEventListener('DOMContentLoaded', populateById);

</script>

对于示例数据，这将生成以下 JavaScript/HTML，您可以在此处对其进行测试：

var collection = [{"Name":"Charlie","ID":"13"},{"Name":"Emma","ID":"9"},{"Name":"Bob","ID":"10"}];

function populate(compareFunc) {
    collection.sort(compareFunc);
    var container = document.getElementById('container');
    container.innerHTML = '';
    collection.forEach(function (key) {
        var div = document.createElement("div");
        div.className = "inventory";
        var span = document.createElement("span");
        span.textContent = key.ID;
        div.appendChild(span);
        span = document.createElement("span");
        span.textContent = key.Name;
        div.appendChild(span);
        container.appendChild(div);
    });
}

var populateById = populate.bind(null, function (a, b) {
    return a.ID - b.ID;
});

var populateByName = populate.bind(null, function (a, b) {
    return a.Name.localeCompare(b.Name);
});

document.getElementById("sort1").addEventListener('click', populateByName);
document.getElementById("sort2").addEventListener('click', populateById);
document.addEventListener('DOMContentLoaded', populateById);
span { margin-left: 5px }
div.inventory { border-bottom: 1px solid gray }
<div id="container"></div>

<button id="sort1">Alphabetical</button>
<button id="sort2">High to Low</button>

请注意，我给这三个项目的 ID 值与您的问题中不同，否则 ID 和名称的排序顺序将相同。

使用表格：替代

有很好的 JavaScript 库，它们提供了更多的功能来表示数据集。这是一个使用带有DataTables的jQuery的示例：

var collection = [{"Name":"Charlie","ID":"13"},{"Name":"Emma","ID":"9"},{"Name":"Bob","ID":"5"}];

function populate() {
  var tbody = $('#collection>tbody');
  collection.forEach(function (key) {
    var row = $('<tr>');
    row.append($('<td>').text(key.ID));
    row.append($('<td>').text(key.Name));
    tbody.append(row);
  });
}

$(document).ready(function(){
  populate();
  $('#collection').DataTable();
});
<script src="http://code.jquery.com/jquery-1.12.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<table id="collection">
    <thead>
        <tr><th>ID</th><th>Name</th></tr>
    </thead>
    <tbody/>
</table>

实际代码（不包括包含的库）甚至比使用基本表的纯 JavaScript 解决方案还要小。但这有上下排序、过滤、分页、漂亮的样式……

【讨论】：

  • 非常感谢您的出色回复，我真的没想到！我很抱歉没有让我的问题更清楚。我没有在表格中显示结果，而是在 div 元素中显示它们。根据您的代码，我已对其进行了修改以满足我的需要：jsfiddle.net/jknj4uat/1（您能否更新您的帖子）-非常感谢您的帮助:)
  • 我很高兴调整我的答案，但是您现在在问题中要求的 HTML 包括 a 和 p 标签，而您指向的 jsfiddle 仅输出名称，而不是 ID ，并且没有那些 a 和 p 标签。所以几乎在所有方面都是不同的。你到底想要什么？ ;-)
  • 无论如何，我已经更新了我的帖子。请注意，在涉及无格式文本时，使用textContent 比使用innerHTML 更好。我还使用 bind 创建了两种风格的 populate 函数，现在它接受函数作为参数进行排序。
【解决方案3】：

您可以通过多种解决方案来达到预期的效果。

如果您想要纯 PHP 方式，您可以将数据保存在 PHP 会话 中并根据需要检索它们。

技巧来了，您创建函数来获取结果数据，您可以在其中传递单个参数，无论您是想从外部 URL 还是从保存的数据中获取数据。

现在，在您的应用程序中，只要您想刷新保存的数据，就调用相同的函数，参数表示刷新 SESSIONS 中保存的数据，以替换为来自外部源的数据。

使用此方法，您可以重复使用已从外部源获取的数据，而无需在每次重新加载函数时重新获取数据。

您可以创建另一个函数，该函数将在应用程序必须从外部源重新获取结果集的所有情况下返回 true。

我已经写了伪代码让你理解我想要表达的意思，

函数检查我们是否必须从外部源重新获取结果：

function hasToRefreshResult() {
        if(/* CERTAIN CONDITIONS */) {
            return true;
        }
        return false;
    }

根据传递的参数从本地/外部源获取数据的几个函数：

    function getResultArray($getdatafromlocal) {
        if(!hasToRefreshResult() && $getdatafromlocal && array_key_exists("filertereddata",$_SESSION) && isset($_SESSION["filertereddata"])) {
            $data=$_SESSION["filertereddata"];
        } else {
            $data=getDataFromExternalURL();
        }

        if(!empty($_GET['sort']) && $_GET['sort'] == 'alphabetical') {
            usort($data, function ($a, $b) {
                return strcmp($a->Name, $b->Name);
            });
        } else {
            usort($data, function ($a, $b) {
                return $b->ID - $a->ID;
            });
        }

        return $data;
    }

    function getDataFromExternalURL() {
        /*****
           YOUR LOGIC TO GET DATA FROM EXTERNAL URL;
         *****/

        $data = array();
        foreach ($homepage as $homepage2) {
            $tmp=json_decode($homepage2, false);
            $data = array_merge($data,$tmp->info->collection);
        }
        $_SESSION["filertereddata"]=$data;
        return $data;
    }

我希望这将严格使用 PHP 解决您的问题。

另外不要忘记在 PHP 文件顶部写 session_start();，您将使用这些函数。

【讨论】：

  • 您能否确认当用户重新加载页面而不进行排序时，是否会解码并合并数组？
  • 是的，可以做到。只需调用该函数即可获取数据。当函数在会话中找不到数据时，它将从外部源获取数据。当它在会话中找到数据时，它将仅从会话中返回数据，您可以执行任何您想要的排序。
  • 因此根据您的要求，它不会对外部源执行多个请求。
  • 所以if(empty($data)) {
  • 会话变量只能用于与用户相关的信息，和/或多个断开连接的组件需要的信息。将它们用作数据转储场是非常糟糕的做法。
猜你喜欢
  • 2021-07-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-03-08
  • 1970-01-01
  • 1970-01-01
  • 2013-03-23
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode