1. Preface:

Recently I learned some methods in JavaScript ES6, these methods are very convenient to use, no longer need to write a long nested loop code to implement some small functions. When I watched the teaching video, I followed a commodity query case, hoping that this case can help some beginners like me to deepen their understanding of the application of some methods. This case stores five kinds of mobile phone data, to realize the price range search and commodity name search two ways.

2. HTML tags

Start with some simple tags, including three input fields, two query buttons, and a table. Because it is a small demo, do not pursue the style of the beautiful, a little simple.

<div class="search"> <span> <span type="text" class="start"> <span>-</span> <span type="text" Class ="end"> <button class="search-price"> </button> </span> <input type="text" class="product"> <button class="search-pro"> The < thead > < tr > < th > id < / th > < th > product name < / th > < th > price < / th > < / tr > < thead > < tbody > < tr > < / tr > < / tbody > < / table > < / div >Copy the code
3. CSS styles

Then write a simple style, at least to be able to read people understand it. The table tag uses absolute positioning, moving 50% to the right and then 50% to the left to achieve absolute center. Beginners like me can remember this.

 <style>
    .search {
        text-align: center;
    }

    input {
        width: 40px;
        height: 12px;
    }
    .table {
        position: relative;
        margin-top: 10px;
    }
    table {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    th,
    td {
        margin: 0;
        padding: 0;
        text-align: center;
        width: 100px;
    }

    th:nth-child(2n-1),
    td:nth-child(2n-1) {
        border: 1px solid #000;
    }

    th:nth-child(2n),
    td:nth-child(2n) {
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        width: 120px;
    }
</style>
Copy the code
4. Create data

Create the commodity data in the script tag as an array containing five objects.

Var data = [{id: 1, pname: 'mi ', price: 2899}, {id: 2, pname: 'oppo', price: 1699}, {id: 3, pname: 'oppo', price: 1699} Price: 9999}, {id: 5, pname: 'huawei ', price: 9999},];Copy the code
5. Get HTML elements

The next step is to get the HTML elements to which the render data and business logic are mounted, using document.querySelector() to match the tag object created in the HTML.

    var tbody = document.querySelector('tbody');
    var search_price = document.querySelector('.search-price');
    var start = document.querySelector('.start');
    var end = document.querySelector('.end');
    var search_pro = document.querySelector('.search-pro');
    var product = document.querySelector('.product');
Copy the code
6. Render data

Rendering into the page, the data generated a commodity form, here I apply colours to a drawing of the encapsulated into the function inside the function, such as the query under the click event Also reuse, this note before rendering data inside empty tbody original data, not realizing the function of query, query out qualified data and original data, The original data doesn’t disappear, and it looks bad.

Function setData(data) {// Empty tbody.innerhtml = "; data.forEach(function(value) { // console.log(value); var tr = document.createElement('tr'); tr.innerHTML = `<td>${value.id}</td> <td>${value.pname}</td> <td>${value.price}</td>` tbody.appendChild(tr) }) } setData(data);Copy the code

The effect is as follows:

According to the commodity price inquiry function

To query goods by price, when we click the query button, we can filter the objects in the array according to the price range of goods we input. The filter() method is used to filter the objects in the array. The filter() method filters all elements of the specified condition and returns a new array. Once we have the filtered array, we re-render the data to the page using the setData function we encapsulated earlier.

search_price.addEventListener('click', Function () {let newData = data.filter(function(value) {return value.price >= start.value && value.price <= end.value; }) // Render the filtered object to the page setData(newData)});Copy the code

Query the commodity price of 1000-3000 yuan as shown in the figure:

Query function by product name

Query an array by item name. Some () is better than filter() because it is the only element in the array. Some () also filters the array by the specified element, but some() terminates the loop as soon as it finds the first element matching the specified element. Of course, there is no problem with filter here. The some() method returns a Boolean value, so you need to add a judgment statement to locate the found elements and declare an empty array to accept the filtered elements.

search_pro.addEventListener('click', function() {
    var arr = [];
    data.some(function(value) {
        if (value.pname === String(product.value)) {
            arr.push(value)
            return true
        }
    })
    setData(arr)
})
Copy the code

Query the product whose product name is “Huawei” as shown in the following figure:

7, the basic function is like this, if it is a little help to the big guy, please click a like, thank you!