How to filter in the table (so that they end up at the bottom of the table) the elements that belong to the "Film" section

Question

I have a set of elements. Some of these are part of section "Film", others of section "Video" and still others of section "VideoYoutube". There is a special column that defines this Section.

The elements in the table that are part of section "Film" must be placed at the bottom of the table.

To be able to put the elements at the bottom of the table I know that you have to use the command:

insertRow(-1);

Since my table is dynamic, how can I set what I want?

Items.forEach(function (item) {               
                    let child = document.createElement("tr");
                    child.innerHTML = `
                    ${item.id}
                    ${item.title}
                    ${item.image} 
                    ${item.section}
                    ${item.date}`;
                    table.appendChild(child);
                })

To understand better, I have to filter by Film only

Example to understand

let itemarr = [{
  id: 1,
  title: "image 1",
  image: "url 1",
  section: "Film",
  date: "date 1",
}, {
  id: 2,
  title: "image 2",
  image: "url 2",
  section: "Video",
  date: "date 2",
},
{
  id: 3,
  title: "image 3",
  image: "url 2",
  section: "Film",
  date: "date 2",
},
{
  id: 4,
  title: "image 4",
  image: "url 2",
  section: "Video",
  date: "date 2",
}]
itemarr.forEach(function(item) {
  let child = document.querySelector('table').insertRow(-1)
  child.innerHTML = `
                    ${item.id}
                    ${item.title}
                    ${item.image} 
                    ${item.section}
                    ${item.date}`

})


  
    Id
    Title
    Image
    Section
    Date

user_125981 · Answer

You can filter your object based on a property (section). Here I show how to do that with the "Film" value.

Now just do this for each in whichever order you want.

This is very basic as a example you can work from and this can be much more "elegant" by calling for example a function and passing the "section" name and using it, setting an object with the "orders" of these and processing that, things like that.

let itemarr = [{
    id: 1,
    title: "image 1",
    image: "url 1",
    section: "Film",
    date: "date 1",
  }, {
    id: 2,
    title: "image 2",
    image: "url 2",
    section: "Video",
    date: "date 2",
  },
  {
    id: 3,
    title: "image 3",
    image: "url 2",
    section: "Film",
    date: "date 2",
  },
  {
    id: 4,
    title: "image 4",
    image: "url 2",
    section: "Video",
    date: "date 2",
  }
];
const resultsFilm = itemarr.filter(obj => {
  return obj.section === "Film";
});
resultsFilm.forEach(function(item) {
  let child = document.querySelector('table').insertRow(-1)
  child.innerHTML = `
                    ${item.id}
                    ${item.title}
                    ${item.image} 
                    ${item.section}
                    ${item.date}`

});


  
    Id
    Title
    Image
    Section
    Date

A bit more "elegant" solution using some objects and functions to process them by sorting in the order we specified.

let itemarr = [{
    id: 1,
    title: "image 1",
    image: "url 1",
    section: "Film",
    date: "date 1",
  }, {
    id: 2,
    title: "image 2",
    image: "url 2",
    section: "Video",
    date: "date 2",
  },
  {
    id: 3,
    title: "image 3",
    image: "url 2",
    section: "Film",
    date: "date 2",
  },
  {
    id: 4,
    title: "image 4",
    image: "url 2",
    section: "Video",
    date: "date 2",
  }
];
let sectionOrder = [{
  section: "Video",
  order: 1
}, {
  section: "Film",
  order: 5
}, {
  section: "YouTube",
  order: 2
}];


function showSection(sectionName) {
  const resultsFiltered = itemarr.filter(obj => {
    return obj.section === sectionName;
  });
  resultsFiltered.forEach(function(item) {
    let child = document.querySelector('table').insertRow(-1)
    child.innerHTML = `
                    ${item.id}
                    ${item.title}
                    ${item.image} 
                    ${item.section}
                    ${item.date}`

  });
}
// sort by the order
sectionOrder.sort((a, b) => (a.order > b.order) ? 1 : -1);
//console.log(sectionOrder);
//process sections in the order we sorted, use that to refer to the data.
sectionOrder.forEach(function(sec) {
  showSection(sec.section);
});


  
    Id
    Title
    Image
    Section
    Date

user_17743647 · Answer

Maybe try this one by pushing the one you want showing later to another array ?

Of course not the best solution, but easiest solution.

If you simply want to use insertRow(-1), you will facing the problem of inserting item in front of the section part th>Id Title Image Section Date, so the easiest way will using this

let itemarr = [{
  id: 1,
  title: "image 1",
  image: "url 1",
  section: "Film",
  date: "date 1",
}, {
  id: 2,
  title: "image 2",
  image: "url 2",
  section: "Video",
  date: "date 2",
},
{
  id: 3,
  title: "image 3",
  image: "url 2",
  section: "Film",
  date: "date 2",
},
{
  id: 4,
  title: "image 4",
  image: "url 2",
  section: "Video",
  date: "date 2",
}];
let lateradd = []


itemarr.forEach(function(item) {

let child = document.querySelector('table').insertRow(-1);
if(item.section ==="Video"){
child.innerHTML = `
   ${item.id}
                    ${item.title}
                    ${item.image} 
                    ${item.section}
                    ${item.date}
`;
}else{lateradd.push(item)}
})
if(lateradd){
lateradd.forEach(function(i){
document.querySelector('table').insertRow(-1).innerHTML =`
   ${i.id}
                    ${i.title}
                    ${i.image} 
                    ${i.section}
                    ${i.date}
`
})

}


  
    Id
    Title
    Image
    Section
    Date

How to filter in the table (so that they end up at the bottom of the table) the elements that belong to the "Film" section

2 Answers