Question

我有两个来自外部网站的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>
    ';
}

Answer 1

您可以使用JavaScript在Click上进行排序，并仅使用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，您可以在此处测试：

＆＃13;

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

＆＃13;

span { margin-left: 5px }
div.inventory { border-bottom: 1px solid gray }

＆＃13;

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

＆＃13;

请注意，我为这三个项目提供了与您的问题不同的ID值，因为否则ID和名称的排序顺序相同。

使用表格：替代

有很好的JavaScript库可以提供更多功能来表示数据集。以下是使用jQuery和DataTables的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

实际代码甚至比使用基本表的纯JavaScript解决方案更小（不包括所包含的库）。但这有分类上下，过滤，分页，漂亮的风格......

Answer 2

这个答案有几种选择，所以我将简单介绍一下：

如果用户没有选择，则发送已排序的数据，默认数据。然后，设置一个根据需要对数据进行排序的函数，并重绘表格/ divs /用于呈现它们的任何内容。

作为一个简单的例子：

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

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

getElementById documentation

Answer 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();。

排序时保留JSON数组

3 个答案:

使用表格：替代