Question

我有一系列数据，这些数据在一个数组（json文件）中包含一些对象，并且将通过react来显示

ab -n 1000 -c 50 -s 30 http://192.168.2.156:80/

是否可以编写类似 postsql =“ select *的实名，例如'％Korston％'” 来过滤数据以仅显示此json文件？

    class App extends React.Component {
     constructor(props){
     super(props);
      this.state = {
       data: [],
           .
           .
           .
    currentPage: 1,
    itemsPerPage: 20,
    value: '',
    startIndex : 0,
    endIndex : 4,
        }}}

[{'id': '5c0b6cd9e1382352759fbc25', 'hotelinfo': {'hotelsearch': {'realname': 'Korston Hotel Moscow'}},{'id': '5c0b6cd9e1382352759fbc24', 'hotelinfo': {'hotelsearch': {'realname': 'Lavanta Hotel'}},{'id': '5c0b6cd9e1382352759fbc28', 'hotelinfo': {'hotelsearch': {'realname': 'Stanpoli Hotel'}}]

编辑：

有一个分页，默认情况下显示4页，然后单击下一步按钮显示其余页面。

    [{'id': '5c0b6cd9e1382352759fbc25', 'hotelinfo': {'hotelsearch': {'realname': 'Korston Hotel Moscow'}}]

您知道我有一个输入（class =“ hotelName”），该用户开始输入（例如，用户类型为“ Korston”），然后单击一个按钮，新结果应仅包含那些包含“ Korston”的酒店的数据名称。

render() {
const { data, currentPage, itemsPerPage,startIndex,endIndex } = this.state;
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
const renderHotel = currentItems.sort((a, b) => a.total - b.total).map((item, i) => {
return  <div class="item">
         <span>{item.hotelinfo.hotelsearch.realname}</span>
     </div>
});
 const pageNumbers = [];
for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
pageNumbers.push(i);
}

 const renderPageNumbers = pageNumbers.slice(startIndex, endIndex).map(number => {
 return (
 <li className={(this.state.currentPage === number ? 'active ' : '') + 'controls'}
key={number}
id={number}>
 {number}
 </li>
 )});
  return (
  <div>
   <input type="text" value={this.state.value} 
    onChange={this.handleInputChange} class="hotelName" /><span onClick=this.handleSearch} class="searchbtn">search</span>
   {renderHotel}
   <ul id="page-numbers" class="pagenumDef">
     <li onClick={this.decremant} class="nexprev">
     <span class="fa-backward"></span></li>
     {renderPageNumbers}
    <li onClick={this.increment} class="nexprev"><span class="fa-forward"></span></li>
   </ul>
  </div>
 )};

Answer 1

您可以使用underscore js解决此问题，filterArray方法需要两个参数，第一个是对象数组，第二个是您需要搜索的查询

var arr =[
  {
    "id": "5c0b6cd9e1382352759fbc25",
    "hotelinfo": {
      "hotelsearch": {
        "realname": "Korston Hotel Moscow"
      }
    }
  },
  {
    "id": "5c0b6cd9e1382352759fbc24",
    "hotelinfo": {
      "hotelsearch": {
        "realname": "Lavanta Hotel"
      }
    }
  },
  {
    "id": "5c0b6cd9e1382352759fbc28",
    "hotelinfo": {
      "hotelsearch": {
        "realname": "Stanpoli Hotel"
      }
    }
  }
]
  
  
  function filterArray(arr, query){
    return _.filter(arr,function(obj){
       return obj.hotelinfo.hotelsearch.realname.indexOf(query) >-1
    })
  }
  
  var result = filterArray(arr,'Korston');
  console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

希望有帮助。干杯！

Answer 2

Array对象的过滤器功能将为您工作，它将在满足条件的Array中输出项目。

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait 

notNowButton = WebDriverWait(driver, 15).until(
    lambda d: d.find_element_by_xpath('//button[text()="Not Now"]')
)
notNowButton .click()

编辑：

let result = this.state.data.filter((item) => {
   item.hotelinfo.hotelsearch.realname === 'Korston Hotel Moscow'
})
console.log(result)

或

let result = this.state.data.filter((item) => {
    let realname = item.hotelinfo.hotelsearch.realname.toString
    if (realname.indexOf(inputval.toString) !== -1){
       return true
    } else {
       return false
    }
})
console.log(result)

Edit2：

关于您的问题：当用户键入“莫斯科考斯顿酒店”的任何单词（例如“莫斯科”或“酒店”或“考斯顿”）时，建议您在检查后设置inputVal值。

代替

let result = this.state.data.filter((item) => {
        let realname = item.hotelinfo.hotelsearch.realname.toString
        if (realname.search(inputval.toString) !== -1){
           return true
        } else {
           return false
        }
    })
    console.log(result)

更改为以下

console.log('ok')

Answer 3

不确定数据的存储位置，但是由于您使用的是ReactJS，因此应将数据存储在state中。

您的状态应如下所示：

state = { 
  arrayOfObjs = [
    {'id': '5c0b6cd9e1382352759fbc25', 'hotelinfo': {'hotelsearch': {'realname': 'Korston Hotel Moscow'}},
    {'id': '5c0b6cd9e1382352759fbc24', 'hotelinfo': {'hotelsearch': {'realname': 'Lavanta Hotel'}},
    {'id': '5c0b6cd9e1382352759fbc28', 'hotelinfo': {'hotelsearch': {'realname': 'Stanpoli Hotel'}}
  ],
};

然后有几个功能。您的过滤器功能找到了合适的搜索位置，第二个功能得到了结果。

//获取结果

getObj = obj => {
let tmpString;//we will use this in a little bit to store the split array
let checkString = "Korston Hotel Moscow" //you can easily make this more dynamic if you need to
 tmpString = checkString.split(" "); //splits the checkString by the spaces in the string and stores it in tmpString as an array

 if(tmpString.includes("Korston"){
   //you can change "Korston" to a string variable if you have one for userInput 
    return obj.hotelinfo.hotelsearch.realname === "Korston Hotel Moscow";
  };

//过滤功能

filterObj = () => {
    const { arrayObjs } = this.state; //destructure state, create variable called arrayObjs that has same value as the state variable arrayObjs
    const filteredItems = arrayObjs.filter(this.getObj); //filter that array of objs
    console.log(filteredItems); //you can do something else with filterItems obviously 
  };

希望这会有所帮助。

注意：includes（）方法与Internet Explorer不兼容。您可以将include（）与indexOf（）换出。此处的区别在于，如果indexOf（）返回-1，则表示您将查看if indexOf() !== -1，这表示不包含它。

编辑

此编辑使返回的结果更加动态而不是静态。现在，无论搜索什么，它都将始终返回“ Korston Hotel Moscow”。

现在，它将根据输入返回适当的结果。

动态回报

将getObj方法更改为此：

getObj = obj => {
    let newString = [];
    let returnString = "";
    const { arrayObjs, userInput } = this.state;

    arrayObjs.map(item => {
      const checkString = item.hotelinfo.hotelsearch.realname;
      newString = checkString.split(" ");
      if (newString.includes(userInput)) {
        returnString = checkString;
      }
    });
    return obj.hotelinfo.hotelsearch.realname === returnString;
  };

这里的区别是地图功能。其背后的逻辑是：您要检查该数组中的每个元素或对象并搜索userInput。当您获得适当的结果时，请将该局部变量returnString设置为与其匹配的obj的realname的{{1}}的{{1}}相等（这就是{{ 1}}是）。完成映射后，它将匹配的值返回回hotelsearch。

总共，您的hotelinfo和checkString应该看起来像这样：

filterObj

如何在响应中过滤数据？

3 个答案:

Edit2：

编辑