appendTo based on title and type - Jquery ajax

Nurarihyon
September 1, 2020
119 views
0 votes
2 Answers

I need to sort the songs based on the series title and type of the song.

I’m using jQuery UI Menu:

<ul id="menu"></ul>

for(y = 0; y<tytuly.length; y++){
    $('<li><div>'+tytuly[y]+'</div><ul><li><div>Openingi</div><ul id="ops'+y+'"></ul></li><li><div>Endingi</div><ul id="eds'+y+'"></ul></li><li><div>Inserty</div><ul id="ins'+y+'"></ul></li></ul></li>').appendTo('#menu');
}

I load content using Ajax (Example Data): [{"nr_wpisu":"1","id":"39","typ":"1","link":"https://animethemes.moe/video/KakumeikiValvrave-OP1.webm","tytul_autor":"Preserved Roses","tytul":"Kakumeiki Valvrave"},{"nr_wpisu":"43","id_anime":"36","typ":"2","link":"https://animethemes.moe/video/MaouGakuinNoFutekigousha-ED1.webm","tytul_autor":"Hamidashimono - Tomori Kusunoki","tytul":"Maou Gakuin no Futekigousha: Shijou Saikyou no Maou no Shiso, Tensei shite Shison-tachi no Gakkou e"}]

In the content loaded there are few records with the same title id, so I made an array without copies
Then I have the list of songs, that I have to sort by the title/title_id and their type, then append it to the correct <ul>

Earlier I was using:

var tytuly = ["title","title2","title3","title4","title5","title6","title7","title8","title9"]; 
for(y = 0; y<tytuly.length; y++){
$('<li><div>'+tytuly[y]+'</div><ul><li><div>Openingi</div><ul id="ops'+y+'"></ul></li><li><div>Endingi</div><ul id="eds'+y+'"></ul></li><li><div>Inserty</div><ul id="ins'+y+'"></ul></li></ul></li>').appendTo('#menu');
            }
                $(function(){
        $("#menu").menu();
      });
     
      var unflist = [];
      var link = ["link","link","link","link","link","link","link","link","link"];
    var type = [1,1,2,2,2,3,3,1,1];
    var tyt_art = ["test","test","test","test","test","test","test","test","test"];
    for (q = 0; q <= 8; q++) {
      if (type[q] == 1) {
        $('<li class="op' + q + '"></li>').appendTo('body #ops');
        $('<div/>').text(tyt_art[q]).appendTo('body .op' + q);
      }
      if (type[q] == 2) {
        $('<li class="ed' + q + '"></li>').appendTo('body #eds');
        $('<div/>').text(tyt_art[q]).appendTo('body .ed' + q);
      }
      if (type[q] == 3) {
        $('<li class="ins' + q + '"></li>').appendTo('body #ins');
        $('<div/>').text(tyt_art[q]).appendTo('body .ins' + q);
      }
      unflist.push(link[q]);
    }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="menu">
</ul>

It should look like this

But the sorting at this moment is not working correctly.
[enter image description here][3]

Answers

Chosen as BEST ANSWER

Im posting the answer, maybe someone would need it someday:

 var currentTitleNumber;
        var q;
        for(q = 0; q<tytuly.length;q++){
    
     if(q == $.inArray(tytuly[q], tytuly)){
      currentTitleNumber = q;
    for(o = 0; o <=ostlength; o++){
      if(typ[o] == 1 && allTytuly[o] == tytuly[q]){
             $('<li class="op'+o+'"></li>').appendTo('body #ops'+currentTitleNumber);
             $('<div/>').text(tyt_art[o]).appendTo('body .op'+o);
           }
           if(typ[o] == 2 && allTytuly[o] == tytuly[q]){
             $('<li class="ed'+o+'"></li>').appendTo('body #eds'+currentTitleNumber);
             $('<div/>').text(tyt_art[o]).appendTo('body .ed'+o);
           }
           if(typ[o] == 3 && allTytuly[o] == tytuly[q]){
             $('<li class="ins'+o+'"></li>').appendTo('body #ins'+currentTitleNumber);
             $('<div/>').text(tyt_art[o]).appendTo('body .ins'+o);
           }
           
    }
    
     }
              
               }

(Edit)

It seems you have 4 arrays with no relationship:

var tytuly = ["title","title2","title3","title4","title5","title6","title7","title8","title9"]; 
var link = ["link","link","link","link","link","link","link","link","link"];
var type = [1,1,2,2,2,3,3,1,1];
var tyt_art = ["test","test","test","test","test","test","test","test","test"];

This is not advised. I would advise adjusting this to an Array of Objects.

var ty = [{
  title: "title 1",
  link: "link 1",
  type: 1,
  art: "test 1"
},{
  title: "title 2",
  link: "link 2",
  type: 1,
  art: "test 2"
},{
  title: "title 3",
  link: "link 3",
  type: 2,
  art: "test 3"
},{
  title: "title 4",
  link: "link 4",
  type: 2,
  art: "test 4"
},{
  title: "title 5",
  link: "link 5",
  type: 2,
  art: "test 5"
},{
  title: "title 6",
  link: "link 6",
  type: 3,
  art: "test 6"
},{
  title: "title 7",
  link: "link 7",
  type: 3,
  art: "test 7"
},{
  title: "title 8",
  link: "link 8",
  type: 1,
  art: "test 8"
},{
  title: "title 9",
  link: "link 9",
  type: 1,
  art: "test 9"
}];

With your data arranged like this, you can more easily use it. If you want to sort by a specific type, you can do this with .sort() using a Compare Function.

var ty = [{
    title: "title 1",
    link: "link 1",
    type: "1",
    art: "test 1"
  }, {
    title: "title 2",
    link: "link 2",
    type: "1",
    art: "test 2"
  }, {
    title: "title 3",
    link: "link 3",
    type: "2",
    art: "test 3"
  }, {
    title: "title 4",
    link: "link 4",
    type: "2",
    art: "test 4"
  }, {
    "nr_wpisu": "1",
    "id": "39",
    "type": "1",
    "link": "https://animethemes.moe/video/KakumeikiValvrave-OP1.webm",
    art: "Preserved Roses",
    title: "Kakumeiki Valvrave"
  }, {
    "nr_wpisu": "43",
    "id_anime": "36",
    "type": "2",
    "link": "https://animethemes.moe/video/MaouGakuinNoFutekigousha-ED1.webm",
    art: "Hamidashimono - Tomori Kusunoki",
    title: "Maou Gakuin no Futekigousha: Shijou Saikyou no Maou no Shiso, Tensei shite Shison-tachi no Gakkou e"
  }, {
    title: "title 7",
    link: "link 7",
    type: "3",
    art: "test 7"
  },
  {
    title: "title 8",
    link: "link 8",
    type: "1",
    art: "test 8"
  }, {
    title: "title 9",
    link: "link 9",
    type: "1",
    art: "test 9"
  }, {
    title: "Song 1",
    link: "link 10",
    type: null,
    art: "Test 10"
  }
];

function popMenu(tObj, myData) {
  var op = $("<li>").html("<div>Openingi</div>").appendTo(tObj);
  $("<ul>", {
    id: "op"
  }).insertAfter($("div", op));
  var ed = $("<li>").html("<div>Endingi</div>").appendTo(tObj);
  $("<ul>", {
    id: "ed"
  }).insertAfter($("div", ed));
  var ins = $("<li>").html("<div>Inserty</div>").appendTo(tObj);
  $("<ul>", {
    id: "ins"
  }).insertAfter($("div", ins));
  $.each(myData, function(i, t) {
    switch (t.type) {
      case "1":
        $('<li>', {
          class: "op-" + i
        }).appendTo($("ul", op));
        $('<div>', {
          title: t.art
        }).text(t.title).appendTo($('.op-' + i, tObj));
        break;
      case "2":
        $('<li>', {
          class: "ed-" + i
        }).appendTo($("ul", ed));
        $('<div>', {
          title: t.art
        }).text(t.title).appendTo($('.ed-' + i, tObj));
        break;
      case "3":
        $('<li>', {
          class: "ins-" + i
        }).appendTo($("ul", ins));
        $('<div>', {
          title: t.art
        }).text(t.title).appendTo($('.ins-' + i, tObj));
        break;
      default:
        var s = $('<li>').appendTo(tObj);
        $('<div>', {
          title: t.art
        }).text(t.title).appendTo(s);
    }
  });
}


$(function() {
  popMenu($("#menu"), ty);
  $("#menu").menu();
});

#menu {
  width: 150px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="menu">
</ul>

Reference Links:

Please signup or login to give your own answer.

Click here to cancel reply.

appendTo based on title and type – Jquery ajax

Answers