Question

我有这个对象数组

let falsyData = [
    {'hola': 'greet'},
    {'Travel': 'traveling'},
    {'Heart': 'corazon'},
    {'Earth': 'tierra'},
    {'Hills': 'a name'},
    {'Blackjack': 'game'},
    {'Casino': 'gambling'}
  ];

我到目前为止所做的功能正在搜索，但它只获得没有属性的属性。为了更好地解释，如果我在搜索栏中输入h，则返回数据为：

hola，Heart，Earth，Hills，因为是包含字母h的对象，并且可以返回属性，但是我也希望看到那些属性的属性。

这是搜索功能的功能

  _matchPeople = (input) => {
    let reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
    return falsyData.map(function(person) {
      for (let key in person) {
        if (key.match(reg)) {          
          return key;
        }
      }
    });
  }

  _changeInput = (val) => {
    let autoCompleteResult = this._matchPeople(this.state.value);    
    if (autoCompleteResult.length) {
      this.setState({result: autoCompleteResult.join(' ')});
    };
  }

  _onChange = (event) => {
    this.setState({value: event.target.value});
  }

我在这里渲染

  render () {
    let searchRes = this._matchPeople(this.state.value),
        match = searchRes.map(function(item) {
          return <Column><Paper><p style={searchOutput}>{item}</p></Paper></Column>;
        });
    return (
      <Grid>
         <TextField onChange={this._onChange.bind(this)}
                    onKeyUp={this._changeInput.bind(this)} value={this.state.value} />
            {!!this.state.value.length &&
              <Row>
                {match}                
              </Row>
            }
      </Grid>
    );
  }

我正在使用ReactJS，以防万一。

我该怎么办？

修改

更具体

有图像搜索字母h，我想要类似的东西，

hola //and then below I want to render greet because {'hola','greet'}

greet

Answer 1

我认为你只需要过滤掉没有与表达式匹配的键的数组元素，如下所示：

  _matchPeople = (input) => {
    let reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
    return falsyData.filter(function(person) {
      var arr = Object.keys(person);
      return arr.some(function(key){
          if(key.match(reg)){
             return true;
          } else {
             return false;
          }
      });
    });
  }

_matchPeople现在将为您提供一个对象数组，其中的键与输入值匹配。例如，h将不再为您提供：['hola', 'Heart', 'Earth', 'Hills']但是：

[
    {'hola': 'greet'},
    {'Heart': 'corazon'},
    {'Earth': 'tierra'},
    {'Hills': 'a name'},
  ];

您可以根据需要在HTML中显示对象属性。

我建议使用与现在不同的结构。而不是：

let falsyData = [
    {'hola': 'greet'},
    {'Travel': 'traveling'},
    {'Heart': 'corazon'},
    {'Earth': 'tierra'},
    {'Hills': 'a name'},
    {'Blackjack': 'game'},
    {'Casino': 'gambling'}
  ];

执行：

let falsyData = {
    'hola': 'greet',
    'Travel': 'traveling',
    'Heart': 'corazon',
    'Earth': 'tierra',
    'Hills': 'a name',
    'Blackjack': 'game',
    'Casino': 'gambling'
  };

算法会稍微改变一下：

  _matchPeople = (input) => {
    let reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
    let filteredObj = { };
    Object.keys(falsyData).forEach(function(key) {
        if(key.match(reg)){
           filteredObj[key] = falsyData[key];
        }
    });
    return filteredObj;
  }

现在，您将获得一个对象，该对象具有与您的条件匹配的属性。而不是具有1个单一属性的对象的数组。

在渲染功能中，您必须像这样更改它：

let searchRes = this._matchPeople(this.state.value),
        match = Object.keys(searchRes).map(function(key) {
          return <Column><Paper><p style={searchOutput}>{key}</p></Paper></Column>;
        });

searchRes[key]将保留属性值。 key将保留属性名称。

如何在对象数组上执行搜索功能？

1 个答案: