如何在javascript中使用三元运算符对对象文字中的值进行排序

时间:2018-01-19 20:35:05

标签: javascript wordpress rest api ecmascript-6

嗨伙计们,我正在尝试对其余的api值进行排序,并且存在一些问题。该值仅在值时显示,例如100-150 $范围内的“price”仅等于150不小于该值。我找不到原因。这是下面的代码:

submitBtn.click(function(){
    var priceInputVal = priceInput.val(); 
    // var output = priceInputVal + '||' + priceList.priceMin[priceInputVal] + ' - ' + priceList.priceMax[priceInputVal];
    $.getJSON('http://didubeplaza.local/wp-json/wp/v2/office-list', function(office_data){

        outputCont.html(`
            ${office_data.map(item => `
                ${item.office_area[0] <= areaList.areaMax[priceInputVal]
                 ? `${item.office_area[0] >= areaList.areaMin[priceInputVal]
                        ? `${item.office_price[0] <= priceList.priceMax[priceInputVal]
                                ? `${item.office_price[0] >= priceList.priceMin[priceInputVal]
                                        ? `<div class="col-sm-4 mb-3">
                                                <div class="card" style="width: 18rem;">
                                                      <img class="card-img-top" src="http://www.decorouscontract.com/wp-content/uploads/Vitra-Workspace-by-Pernilla-Ohrstedt_dezeen_468_3.jpg" alt="Card image cap">
                                                      <div class="card-body">
                                                        <h5 class="card-title">${item.title.rendered}</h5>
                                                      </div>
                                                      <ul class="list-group list-group-flush">
                                                        <li class="list-group-item">Area: ${item.office_area}</li>
                                                        <li class="list-group-item">Price: ${item.office_price}</li>
                                                        <li class="list-group-item">Status: </li>
                                                      </ul>
                                                </div>
                                            </div>`
                                        : `<p>min price too small</p>`
                                    }`
                                : `<p>max price too high</p>`
                            }`
                        : `<p>min area too little</p>`
                    }`
                 : `<p>arrea max too high</p>`
                }

                `).join('')}    
        `);
    });
});

});

1 个答案:

答案 0 :(得分:0)

以下是展平版本的示例:

outputCont.html(`${...map(...).join('')}`)

我没有机会测试它,所以请将它视为一个想法演示。 `${}`也有一些过度使用反引号,不需要在./bin/parallel-lint --exclude app --exclude vendor . 中包含加入的结果。