Сортировка массива объектов по свойству с использованием списков событий с выпадающим списком - PullRequest
Новая
       8

Сортировка массива объектов по свойству с использованием списков событий с выпадающим списком

0 голосов
/ 18 сентября 2018

Итак, я создаю представление, которое показывает список объявлений.Каждое объявление является объектом в массиве и имеет свойства (заголовок, описание, даты и т. Д.). Я написал javascript для отображения их по порядку и создал выпадающий список заголовка, описания, даты и т. Д., И мне нужно отсортироватьобъявления в соответствии с выбранным свойством в раскрывающемся списке.У меня есть функция, которая сортирует объекты по свойству, и я хочу, чтобы для каждого параметра был выбран список событий, но я не уверен, как это реализовать, поскольку я использую цикл для отображения всех рекламных объектов.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="sortList">

      <select id="selectSort" onchange="myFunction()">
        <option value="value1">value1
        <option value="value2">value2
        <option value="value3">value3
      </select>
    </div>
    <div id="container"></div>
  </body>
</html>

Сценарий 

var array = [
    {
        value1: "this is an attribute", value2: "this is the second attribute", value3: "this is the 3rd attribute"


    },
    {
        value1: "this is an attribute of 2nd object", value2: "this is the second attribute of 2nd object", value3: "this is the 3rd attribute of 2nd object"
    },
    {
        value1: "this is an attribute of 2nd object", value2: "this is the second attribute of 2nd object", value3: "this is the 3rd attribute of 2nd object"
    },
];


   const container = document.getElementById("container"); 

  for( { value1, value2, value3 } of array) {


    const wrapper =  document.createElement("div");
    wrapper.className = "wrapper";
    const first= document.createElement("h1");
    first.textContent = value1;
    const second= document.createElement("p");
    second.textContent = value2;    
    const third= document.createElement("sub");
    third.textContent = value3;


   // append 
    wrapper.appendChild(first);
    wrapper.appendChild(second);
    wrapper.appendChild(third);
    container.appendChild(wrapper);

 }

//function that sorts ads by properties 

function sortBy(property) {
    var sortOrder = 1;
    if(property[0] === "-") {
        sortOrder = -1;
        property = property.substr(1);
    }
    return function (a,b) {
        var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
        return result * sortOrder;
    }
}

//I want to have eventlisteners on each option selected but then not sure how to implement this since I'm using a loop to display all the ads

array.sort (sortBy ("value1"));

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

Я буду спрашивать только заголовок Вопроса (РЕДАКТИРОВАТЬ: вы редактировали заголовок).С DOM все просто (и, честно говоря, я не работал с ним последние несколько лет).

Сортировка по свойству: 

ads.sort((a, b) => a[selectedProp] > b[selectedProp] ? 1 : -1)

Затем вам нужно каким-то образом обновить свое представление (не знаю, как это сделать, я избалован фреймворками, такими как угловые, реагирующие и т. Д.),возможно, с помощью React или Vue.js.Делать петли это хорошо.Вы просто зацикливаете один и тот же массив.Единственное, что вам нужно, это обновить представление.

0 голосов
/ 18 сентября 2018

Вы можете попробовать вот так добавить к списку событий элемент select, а затем получить выбранное значение на myFunction(). Но перед этим вы сначала измените свои значения option, например, чтобы легко получить и использовать их в своей функции сортировки. 

<select id="selectSort" onchange="myFunction(this.value)">
    <option value="title">Title</option>
    <option value="description">Description</option>
    <option value="start_date">Start date</option>
    <option value="end_date">End date</option>
    <option value="offer">Most products</option>
    <option value="num_of_products">Least products</option>
</select>

Также инициализируйте содержимое container.innerHTML = '';, это поможет вам обновить ваш div после изменения порядка сортировки. Я также обернул функцию bodyContent() для повторного использования кода. Надеюсь, что это поможет :) Смотрите вашу ручку здесь снова 

var ads = [{
    title: "Photo Play Paper Collections",
    description: "Don't miss these brand new Photo Play Paper Collections!",
    start_date: "2018-09-01",
    end_date: "2018-12-30",
    offer: "50% Off",
    num_of_products: 7
},
{
    title: "Foil & Foiling Accessories",
    description: "Once you add this color & shine to your paper, wood, fabric, or other porous surfaces you'll want to do it over and over again.",
    start_date: "2018-08-01",
    end_date: "2018-11-30",
    offer: "Save $25",
    num_of_products: 10
},
{
    title: "The Halloween Shop",
    description: "Shop all our spooky supplies in one place!",
    start_date: "2018-09-01",
    end_date: "2018-10-30",
    offer: "35% Off",
    num_of_products: 8
},
{
    title: "Waffle Flower Crafts Stamps & Dies",
    description: "We can't stop talking about these new Waffle Flower Stamps and Dies!",
    start_date: "2018-09-01",
    end_date: "2018-09-30",
    offer: "Save $30",
    num_of_products: 19
},
{
    title: "Die Cutting & Embossing",
    description: "Save on Die Cutting and Embossing Folders at Blitsy! Shop hundreds of amazing Dies and Embossing Folders from brilliant designers at Sizzix, Spellbinders, and CottageCutz (to name a few!)",
    start_date: "2018-08-01",
    end_date: "2018-12-30",
    offer: "Save $50",
    num_of_products: 23
},
{
    title: "American Crafts Tools, Paper Collections & More",
    description: "American Crafts prides themselves on innovation with their scrapbooking products. You can find crafting embellishments, stickers, and more.",
    start_date: "2018-08-01",
    end_date: "2018-11-30",
    offer: "45% Off",
    num_of_products: 35
},
{
    title: "The Fall Shop!",
    description: "The Fall Shop has everything you need for the upcoming season!",
    start_date: "2018-09-01",
    end_date: "2018-09-30",
    offer: "60% Off",
    num_of_products: 50
},
{
    title: "Moxy Glitter, Embossing Powers, & More!",
    description: "Eye catching glitters from this new brand by American Crafts!",
    start_date: "2018-09-01",
    end_date: "2018-09-30",
    offer: "10% Off",
    num_of_products: 24
},
{
    title: "Brutus Monroe Stamps, Dies, Tools & More",
    description: "On Sale Now! New Arrivals from Brutus Monroe",
    start_date: "2018-08-01",
    end_date: "2018-10-30",
    offer: "Save $75",
    num_of_products: 10
},
{
    title: "Fiskars Tools & Accessories",
    description: "Shop All the New Tools & Accessories that will make your life easier.",
    start_date: "2018-08-01",
    end_date: "2018-09-30",
    offer: "15% Off",
    num_of_products: 5
},
];

function bodyContent() {
  const container = document.getElementById("container");
  container.innerHTML = '';
  for ({
      title,
      description,
      start_date,
      end_date,
      offer,
      num_of_products
    } of ads) {


    const wrapper = document.createElement("div");
    wrapper.className = "wrapper";
    const headline = document.createElement("h1");
    headline.textContent = title;
    const descrip = document.createElement("p");
    descrip.textContent = description;
    const dates = document.createElement("sub");
    dates.textContent = "Offer valid " + start_date + " through " + end_date;
    const discount = document.createElement("h2");
    discount.textContent = offer;
    const products = document.createElement("h4");
    products.innerHTML = num_of_products + " items still available! <a href=#>Shop Now</a>";

    // append 
    wrapper.appendChild(headline);
    wrapper.appendChild(discount);
    wrapper.appendChild(descrip);
    wrapper.appendChild(products);
    wrapper.appendChild(dates);
    container.appendChild(wrapper);
  }
}


bodyContent()
//function that sorts ads by properties 

function sortBy(property) {
  var sortOrder = 1;
  if (property[0] === "-") {
    sortOrder = -1;
    property = property.substr(1);
  }
  return function(a, b) {
    var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
    return result * sortOrder;
  }
}

//I want to have eventlisteners on each option selected but then not sure how to implement this since I'm using a loop to display all the ads
function myFunction(value) {
  ads.sort(sortBy(value));
  bodyContent()
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
div {
  margin: 5%;
  
}

.wrapper {
  border: 2px solid #3abac4;
  padding:5%;

}

h4 a {
  text-decoration: none;
  color: #fff;
  background-color: #3abac4;
  margin: 10px;
  padding: 10px;
}

h4 a:hover {
  color: #3abac4;
  background-color: #fff;
  border: 2px solid #3abac4;
}
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="sortList">
      
      <select id="selectSort" onchange="myFunction(this.value)">
        <option value="title">Title</option>
        <option value="description">Description</option>
        <option value="start_date">Start date</option>
        <option value="end_date">End date</option>
        <option value="offer">Most products</option>
        <option value="num_of_products">Least products</option>
      </select>
    </div>
    <div id="container"></div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...