努力通过从 ElasticSearch 返回的 JSON 进行映射

Question

我在 react.js + node.js + ElasticSearch 项目中取得了进展。但是，我遇到了一个我似乎无法弄清楚的问题。我想从弹性返回特定的 json 片段（如名称和描述），但我只能返回整个命中结果。我试过“.forEach()”、“.map()”和“.json()”，但还没有弄清楚。我希望能够显示每个结果命中的名称和描述。任何输入都会很棒！

反应：

import React, { Component } from 'react';
import axios from 'axios';
import ResultClub from './components/ResultClub';

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      result: [],
      userInput: '',
      searched: false,
    }
  }

//assigning userInput a new value
  handleChange = event=> {
    event.preventDefault();
    this.setState({userInput: event.target.value});
  }

//retreiving elastic search data using userinput
  handleSubmit = event=> {
    event.preventDefault();

    axios.get('http://localhost:4000/search?query=' + this.state.userInput)
      .then(res => {
        var result = res.data;

        this.setState({ result: result,
                        searched: true,
                      });
        console.log(this.state.result);
        console.log(this.state.userInput);
      })

  }

//if user has searched, display the data
    displayResults(props){
      var searched = this.state.searched;
      if (searched){
        return <p> { JSON.stringify(this.state.result) } </p>;
      }
    }

  render() {
    return (
      <div className="App">
        <h2>hello from react</h2>
          <form action="/search">
            <input type="text" value={this.state.userInput} onChange={this.handleChange} placeholder="Search..." name="query" id="userText"/>
            <button type="submit" onClick={this.handleSubmit}><i>Search</i></button>
          </form>
          {(this.displayResults())}
      </div>
    );
  }
}

export default App;

节点：

const express = require('express');
const bodyParser = require('body-parser');
const morgan = require('morgan');
const JSON = require('circular-json');
const PORT = 4000;
var client = require ('./connection.js');
var argv = require('yargs').argv;
var getJSON = require('get-json');
const cors = require('cors');

let app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(cors({
  origin: 'http://localhost:3001',
  credentials: true
}));

app.get('/', function(req, res){
  res.send("Node is running brother");
});

app.get("/search", function (request, response) {
  let query = request.query.query;
  client.search({
    index: 'club',
    type: 'clubinfo',
    body: {
      query: {
        match: { "name": query}
      },
    }
  },function (error, data, status) {
        if (error) {
        return console.log(error);
      }
      else {
        // Send back the response
        response.send(data.hits.hits);
      }
  });
});

app.listen(PORT, () => console.log('wowzers in me trousers, Listening on port ' + PORT));

ElasticSearch 返回（我想访问 hits.hits 中每个未命名对象的 _source.name）：

{
    took: 14,
    timed_out: false,
   -_shards: {
        total: 5,
        successful: 5,
        skipped: 0,
        failed: 0
    },
   -hits: {
        total: 1,
        max_score: 0.6931472,
       -hits: [
           -{
                _index: "club",
                _type: "clubinfo",
                _id: "Tl2B3mgB0CGswaMHFVwp",
                _score: 0.6931472,
                _source: {
                    name: "Italian club",
                    tags: "pasta, food, eating, italian",
                    description: "we are italian!"
                }
            }
           -{
                _index: "club",
                _type: "clubinfo",
                _id: "Tl2B3mgB0CGswaMHFVwp",
                _score: 0.3179638,
                _source: {
                    name: "Old club",
                    tags: "golf, chair",
                    description: "we are Old people!"
                }
            }
        ]
    }
}

Answer 1

根据您想要在this.state.result.hits.hits 上使用map 的问题中的JSON。

示例

class App extends Component {
  // ...

  render() {
    const { searched, result } = this.state;

    return (
      <div className="App">
        <h2>hello from react</h2>
        <form action="/search">
          <input
            type="text"
            value={this.state.userInput}
            onChange={this.handleChange}
            placeholder="Search..."
            name="query"
            id="userText"
          />
          <button type="submit" onClick={this.handleSubmit}>
            <i>Search</i>
          </button>
        </form>
        {searched && (
          <div>
            {result.hits.hits.map((hit, index) => (
              <div key={index}>
                {hit._source.name}: {hit._source.description}
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }
}

Answer 2

使用 Array#map 和解构从您的对象中获取所有名称。

const data = {took:14,timed_out:false,_shards:{total:5,successful:5,skipped:0,failed:0},hits:{total:1,max_score:.6931472,hits:[{_index:"club",_type:"clubinfo",_id:"Tl2B3mgB0CGswaMHFVwp",_score:.6931472,_source:{name:"Italian club",tags:"pasta, food, eating, italian",description:"we are italian!"}},{_index:"club",_type:"clubinfo",_id:"Tl2B3mgB0CGswaMHFVwp",_score:.3179638,_source:{name:"Old club",tags:"golf, chair",description:"we are Old people!"}}]}}

const res = data.hits.hits
.map(({_source:{name,description}})=>({name,description}));

console.log(res);