jsで並び替えをして、HTMLを出力したい

Question

実現したいこと

ソート番号を使用して、ソートしたい。

ここに実現したいことを箇条書きで書いてください。

• xmlからデータを取得する
• ソート番号を使用して、ソートする
• htmlで出力する

該当のソースコード

<?xml version="1.0" encoding="UTF-8"?>
<result>

<template:block id="portfolio">
	<item>
		<id>${ID}</id>
		<title>建物名</title>
		<number>ID</number>
		<sort_number>ソート番号</sort_number>
		<type>用途</type>
		<type_number>用途ID</type_number>
		<area>地域</area>
		<area_number>地域ID</area_number>
		<address>詳細_所在地</address>
		<position>所在地</position>
		<img>画像イメージのパス</img>
	</item>
</template:block>
</result>

画面にはこんな形で出力されるのですが、この並び順を変更したいと考えています。

test()

function test() {
  $.ajax({
    url: "test.xml",
    success: function(result) {
      // xmlデータからほしいデータをfindで探し処理
      $(result).find("result item").each(function(index, item) {
        // 要素ごとにタグを作成
        var type_number = $(item).find('type_number').text();

        if (type_number === "1") {
          //変数取得
          var sort_number = $(item).find("sort_number").text();
          var area_number = $(item).find("area_number").text();
          var picture = $(item).find('img').text();
          var title = $(item).find('title').text();

　　　//並び替え 処理考え中
          var sample = [];
          var array = []
          sample = [sort_number,area_number,picture,title]
          var array = sample
          // sample.sort((a, b) => {
          //   return a.sort_number < b.sort_number ? -1 : 1;
          // });
          
          $(function() {
            var inHtml = "<li class='list_view list_area" + $(item).find("area_number").text() + "'>"
              + "<a href='/ja/test/detail.html?id=" + $(item).find("id").text() + "'>"
              + "<span class='test-type-list__img' style='background-image: url(&quot;" + picture + "&quot;)'></span>"
              + "<p>" + $(item).find('title').text() + "</p>"
              + "</a>" +
              + "</li>";
            $('ul.portfolio-type-1.portfolio-type-1').append($(inHtml));
          });
        }
        else if (type_number === "2") {
             //同じ処理
        }
        else if (type_number === "3") {
             //同じ処理
        }        
      });
      //console.log(sample)
    },
    error: function(data) {
      console.log(data);
    }
  });
}

<ul class="test-type-list tst-type-1">
  <!-- liをjsで追加している  -->
</ul>

調査したこと・試したこと
試行錯誤状態のため、こうできればすら見えていません。

最終的には、
[array
[ソート番号,XXX,XXXX,XXXXX,XXXXXX],
[ソート番号,XXX,XXXX,XXXXX,XXXXXX],
[ソート番号,XXX,XXXX,XXXXX,XXXXXX],
]
この形で配列をと整えれば、並び替えが可能と考えています。

課題
xmlをループさせるため、HTMLの出力が外になる。
うまく配列が作成できない。ばらばらの配列になってします。

Comments

[yambejp]

圧倒的に情報が足りないと思います
そもそもXMLのサンプルがないのでソート番号の仕様もなにも質問者さんにしかわかりません

[m.ts10806]

項目名だけ入ってるものよりサンプルでも実際に近いデータが入ってるもののほうが良いです。
あと、現状起きてる問題を、文章説明ではなく結果が見えるような情報を提示してください。
「うまくいかない」「バラバラ」では主観表現となり結果までは見えません。

Answer 1

自己解決のため、問題なし