如何过滤数据？

3 回答

• 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>
  

  希望能帮助到你 . 干杯!

  回复于 2024-04-29T03:26:39+08:00
• 0

  Array对象的过滤功能将适用于您 . 它将在Array中输出满足条件的项 .

  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)
  

  要么

  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)
  

  ---

  Edit2：

  关于你的问题：当用户输入'Korston Hotel Moscow'的任何单词时（例如'Moscow'或'Hotel'或'Korston'） . 我建议在检查后设置inputVal值 .

  代替

  console.log('ok')
  

  改为以下

  console.log('ok')
  this.setState({
     value: item.hotelinfo.hotelsearch.realname
  },() => this.state.value)
  

  回复于 2024-04-29T03:26:39+08:00
• 0

  不确定数据的存储位置，但由于您使用的是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不兼容 . 您可以使用indexOf（）交换includes（） . 这里的区别在于，如果indexOf（）返回-1表示它不包含它，您将检查 if indexOf() !== -1 .

  编辑

  此编辑使得返回的结果更加动态而不是静态 . 现在，无论搜索什么，它总会返回“Korston Hotel Moscow” .

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

  Dynamic Return

  将您的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;
    };
  

  这里的区别是 Map 功能 . 这背后的逻辑是：您要检查该数组中的每个元素或对象并搜索 userInput . 当你得到适当的结果然后设置这个局部变量 returnString 等于它匹配的obj的 hotelinfo 的 hotelsearch 的 realname （这是 checkString 是） . 完成映射后，它会将匹配的值返回到 filterObj .

  总之，你的 getObj 和 filterObj 应该是这样的：

  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;
    };
  
    filterObj = () => {
      const { arrayObjs } = this.state;
      const filteredItems = arrayObjs.filter(this.getObj);
      if (filteredItems.length === 0) {
        //do something if there isn't a match
        alert("sorry there are no results for that search");
      }else{
        //do something with the matching results
        //you can add this to your state by using setState or whatever 
        //you want to do with it
      }
    };
  

  回复于 2024-04-29T03:26:39+08:00