使用javascript对数据集进行排序

Posted 2021-05-05

我试图使用一个按钮来排序由php调用的动态数据集。现在我只是想按一个按钮，按最高项排列它们。

在catalog.view.php中

 <div class="pricing-buttons">
    <button type="button" class="highest btn btn-outline- 
 primary">highest price</button> <button type="button" class="lowest 
  btn btn-outline-info">lowest price</button>
  </div>
<section class="container-fluid">
    <div class="row">
       <?php if (isset($items)) { ?>
        <?php foreach ( $items as $item) : ?>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="container-fluid">
                    <article class="cards">
                              <div class="col-12">


 <section class="card-holder" id="<?php echo $item['code']; ?>">


 <section class="card code">

 <ul>

  <h2 class="cat-order-code bottom-drop center" 
 data-code="<?php echo $item['code']; ?>">Code: <?php echo $item['code']; ?></h2>


<h3 class="cat-order-name center"><?php echo $item['name']; ?></h3>


 <img class="cat-order-image thumbnail box-image-width" 
 src="<?php echo IMAGES .  $item['image']; ?>" 
 alt="<?php echo $item['description']; ?>">


  <!-- part I am working on here the data-value ['price'] -->                                                    
 <li class="cat-order-price" data-value="<?php echo $item['price']; ?>">Price:
 <?php echo $price = ($item['price'] == 0 ? 'Make offer' :  '$' . $item['price']);
 ?></li>


 <h4 class="cat-order-sold sale" data-sold="<?php echo $item['sold']; ?>">
 <?php echo $sold = ($item['sold'] == 0 ? 'For Sale' : 'sold'); ?></h4>


 <a class="cat-order-btn btn btn-lg btn-outline-danger btn-width 
 center-block"  href='details.php?id=<?php echo $item['id']?>'>
 <?php echo $item['id']; ?></a>

  </ul>

  </section>

 </section>

 </div>

 </article>

 </div>

 </div>

 <?php endforeach; ?>

 <?php } ?>

 </div>

 </section>

我正在大块工作，因为我还是javascript和Es6的新手。到目前为止，在我的javascript文件中

 const highest = document.querySelector('.highest');
 const priceValue = 
 Array.from(document.querySelectorAll('[data-value]');
 const price = priceValue;
 price.map(price => price.dataset.value);
 console.log(price);

我的问题是为什么地图不能正常运作？我知道我有很长的路要走到我想要的地方，但我想了解为什么我的map函数返回的值与Array.from函数相同？

任何帮助都会感激不尽。

答案

您应该将map操作的结果分配给变量，如此

const result = price.map(price => price.dataset.value);
console.log(result);

如果要对values数组进行排序，现在可以使用sort方法对其进行排序

result.sort();

此外，具有与数组相同名称的元素变量可能会令人困惑。这将是一个更具可读性的选择

const result = price.map(p => p.dataset.value);