1

次のコード/データを使用して、各ハウスで最も収益の高い学生のリストを表示しています。

データ

User_Infoはオブジェクトの配列です 添付資料1：User_Infoはオブジェクトの配列です

User_Infoは、このようなオブジェクトの配列です 添付ファイル2：User_Infoは、このようなオブジェクトの配列です

Database_Infoはこのようなオブジェクトです 添付資料3：Database_Infoはこのようなオブジェクトです

コード

    HPAnalysisObject.dispHPTotals = function(User_Info, Database_Info) {
        // See attachments 1 and 2
        console.log(User_Info);
        // See attachment 3
        console.log(Database_Info);

        // "label" is just a text title, like "Eagles"
        var html = '<h2>' + HPAnalysisObject.label + '</h2>' + 
            // "TotalPoints" is an integer figure
            '<div id="total">' + Database_Info.TotalPoints + '</div>';

        // create the table to display
        html += '<table><tr><th class="name">Name</th><th class="points">Points</th></tr>';

        // use "for, in" to access the value of the object key (which is the user's ID)
        for (var id in Database_Info.UserDetails) {
            html += '<tr>';
            for (var i = 0; i < User_Info.length; i++) {
                if (User_Info[i].id == id) {
                    // if the User_Info and Database_Info objects match up on the User's ID, add table cells to our html variable
                    html += '<td class="name">' + User_Info[i].firstname + ' ' + User_Info[i].surname + '</td><td class="points">' + Database_Info.UserDetails[id] + '</td>';
                }
            }
            html += '</tr>';
        }

        html += '</table>';

        $('div#display').html(html);
    };

問題

奇妙なことに、Firefoxでは、生徒は私のPHPスクリプトから受信されるため、これらの生徒は正しい番号順に表示されます。

ただし、GoogleChromeとInternetExplorerでは、一見ランダムな順序で表示されます。

私の最初の考えはオブジェクトを注文することでしたが、ここでいくつかの質問を読んだので、オブジェクトの注文はベストプラクティスではないようです。

このコードを書き直して、すべてのブラウザで同じ表形式のデータを正しい順序で表示できるようにすることはできますか？

前もって感謝します、

4

4 に答える 4

1

ほとんどの言語では、オブジェクト属性が特定の順序で発生すると想定することはできません。

1つの解決策は、次のようなUserDetailsの各エントリにアクセサを追加することです。

UserDetails = {ID：{アクセサー：1、ID：ID}}

次に、UserDetails[ID].accessorでレコードを並べ替えます。

もう1つは、Key値を「key：value」としてエンコードする要素の配列としてUserDetailsを構築し、取得した各要素を/：/で次のように分割することです。

["90030：87" ...]

編集

仮定

var userDetails={
                  a:{i:3,key:'third'},
                  b:{i:1,key:'first'},
                  c:{i:2,key:'second'}
};

ここで、iはアクセサーであり、を使用してオブジェクトのソートされた配列を作成できます。

var sortedObjs=Object.keys(userDetails)
                     .map(function(k){ return userDetails[k] })
                     .sort(function(left,right){ return left['i']-right['i'] });

userDetailsからキーを抽出し、マップを介してキー付き要素の配列を作成し、結果の要素をアクセサ値で並べ替えます。

console.log(sortedObjs.map(function(elt){return elt.key}).join(','))

コンソールに出力します：

first,second,third
于 2012-09-11T15:46:47.997 に答える
0

配列ラッパーを使用してDatabase_Info.UserDetailsを並べ替える必要があります。

// test data using same data as example but with no order
var Database_Info = { 
  UserDetails : { 
    137473 : 87, 
    90132 : 126, 
    90057 : 79, 
    90030 : 87, 
    90095 : 82 
  }
}

var objWrapper = [];
for (key in Database_Info.UserDetails) {
  objWrapper.push(key);
}
objWrapper.sort(); // default sort = numeric order ascending

for (a = 0, b = objWrapper.length; a < b; a++) {
  var userInfo = Database_Info.UserDetails[objWrapper[a]];
  // do something interesting
  console.log(userInfo);
}
于 2012-09-11T16:02:26.673 に答える
0

オブジェクトを並べ替え可能な配列でラップすることにしました。これでうまくいくようです。

HPAnalysisObject.dispHPTotals = function(User_Info, Database_Info) {            
    // make a sortable array
    var Combined_Info = [];

    // "label" is just a text title, like "Eagles"
    var html = '<h2>' + HPAnalysisObject.label + '</h2>' + 
        // "TotalPoints" is an integer figure
        '<div id="total">' + Database_Info.TotalPoints + '</div>';

    // create the table to display
    html += '<table><tr><th class="name">Name</th><th class="points">Points</th></tr>';

    // use "for, in" to access the value of the object key (which is the user's ID)
    for (var id in Database_Info.UserDetails) {

        for (var i = 0; i < User_Info.length; i++) {
            if (User_Info[i].id == id) {
                var StudentInfo = { name: User_Info[i].firstname + ' ' + User_Info[i].surname, points: Database_Info.UserDetails[id] };
                Combined_Info.push(StudentInfo);
            }
        }

    }

    Combined_Info.sort( function(a, b) {
        return b.points - a.points;
    });

    for (var i = 0; i < Combined_Info.length; i++) {
        html += '<tr>';
        html += '<td class="name">' + Combined_Info[i].name + '</td><td class="points">' + Combined_Info[i].points + '</td>';
        html += '</tr>';
    }

    html += '</table>';

    $('div#display').html(html);
};
于 2012-09-12T10:04:02.223 に答える
0

オブジェクトは、キーから値へのソートされていないマッピングであり、その順序は保証されません。

このような場合は、IDを数値キーとして使用して配列を作成するのが好きです。たとえば、PHPでは次のようになります。

$out = Array();
while($row = database_get_row($set)) { // replace with your choice of database library
    $out[$row['id']] = $row;
}
ksort($out);
$out = array_values($out);

このようにして、配列がIDの昇順であることを確認し、その配列をJavaScriptに渡してfor(i=0;i<l;i++)ループで使用できます。

于 2012-09-11T15:35:09.420 に答える