добавить ссылку на объект json в response js - PullRequest
Новая
       199

добавить ссылку на объект json в response js

0 голосов
/ 09 мая 2020

У меня есть json данных, которые я извлекаю из api. Скажем, таблица (приведенная ниже таблица является просто примером) 

  Name | Age
   A      20
   B.     25

Теперь я извлекаю имя и возраст из API и отображаю его как формат таблицы (я использую React js Теперь я хочу сделать содержимое имени, такое как A и B, интерактивным. Когда я нажимаю A, он должен связать меня с другим URL-адресом api (проблема в том, что URL-адрес api отличается для каждого объекта имени) Итак, api для 

A = http://example/name?=A 
B = http://example/name?=B

Теперь, как мне связать мое имя содержимое объекта (A, B) в api (url) и заставить его получать данные и отображать их в виде таблицы на другой странице.

Итак, когда я нажимаю на A, он должен отправить меня на другой URL-адрес, и на этой веб-странице я должен увидеть полученные данные (того URL-адреса api, на который я только что получил) в форме таблицы.

Мой код: 

     import React, { Component } from "react";

    export default class Stocks extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
      search: "",
    };
  }

  updateSearch(event) {
    this.setState({ search: event.target.value });
  }

  componentDidMount() {
    fetch("http://131.181.190.87:3001/all")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          isLoaded: true,
          items: json,
        });
      });
  }

  render() {
    let filteredItems = this.state.items.filter((item) => {
      return (
        item.symbol.toUpperCase().indexOf(this.state.search.toUpperCase()) !==
          -1 || item.industry.indexOf(this.state.search) !== -1
      );
    });
    var { isLoaded, items } = this.state;
    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
          <form className="form-for-table-search">
            SelectSymbol: &emsp;
            <input
              type="text"
              value={this.state.search}
              onChange={this.updateSearch.bind(this)}
            />
            &emsp; &emsp;{" "}
            <button type="button" className="btn-submit">
              Search
            </button>
            <br />
            &emsp; Industry: &emsp; &emsp; &emsp;
            <input
              type="text"
              value={this.state.search}
              onChange={this.updateSearch.bind(this)}
            />
            <button type="button" className="btn-submit">
              Search
            </button>
            &emsp; &emsp; History of Symbol and date : &emsp; &emsp; &emsp;
            <input
              type="text"
              value={this.state.search}
              onChange={this.updateSearch.bind(this)}
            />
            &emsp; &emsp;
            <button type="button" className="btn-submit">
              Search
            </button>
          </form>
          <table border={2} cellPadding={1}>
            <thead>
              <tr>
                <th>Symbol</th>
                <th>Name</th>
                <th>Industry</th>
              </tr>
            </thead>

            <tbody>
              {filteredItems.map((item) => (
                <tr>
                  <td key={item.symbol}>{item.symbol}</td>
                  <td key={item.name}>{item.name}</td>
                  <td key={item.industry}>{item.industry}</td>
                </tr>
              ))}
              }
            </tbody>
          </table>
        </div>
      );
    }
  }
}

Любая помощь приветствуется. Спасибо.

1 Ответ

1 голос
/ 10 мая 2020

Вы можете динамически создавать обработчики кликов для передачи информации, необходимой для создания URL-адреса для выборки. Примерно так: 

handleClick = name => 
    fetch(`http://example.com/name?=${name}`).then((data) => {
        // handle redirect to new page
    })

<td key={item.name} onClick={() => handleClick(item.name)}>{item.name}</td>

Я не могу дать точного ответа о том, как перенаправить на вашу новую страницу, не зная больше о том, как настроено ваше приложение.

Если вы используете React Router, вы можете использовать Redirect или history для передачи данных в компонент вашей таблицы отображения. В качестве альтернативы вы можете вместо этого отобразить Link в ячейке таблицы, передав имя в качестве опоры новому компоненту страницы и получить этот компонент при монтировании.

...