Блог

Главная - Вопросы по программированию - Как заполнить столбец, который считается внешним ключом в ReactTable в React из файла json

Как заполнить столбец, который считается внешним ключом в ReactTable в React из файла json

#javascript

#javascript

Вопрос:

Проблема в том, что я сопоставил объекты: один многим (пример «категория» и «продукт») и управление внешним ключом во внешнем интерфейсном приложении с помощью React.

Серверная часть содержит данные Spring Boot Rest.

Столбцы похожи:

 class ListProd extends Component {
    constructor(props) {
        super(props);
        this.state = { prod: []};
    }
    componentDidMount() {
        this.fetchProds();
    }
    fetchEtuds = () => {
        fetch ('http://localhost:8080/'   'products')
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    prod: responseData._embedded.products,
                });
            })
            .catch(err => console.error(err));
    }  

 const columns = [{
            Header: 'Id',
            accessor: 'id',
            Cell: this.renderEditable
        }, {
            Header: 'Code Product',
            accessor: 'codep',
        }, {
            Header: 'Label',
            accessor: 'label',
        },  {
            Header: 'Price',
            accessor: 'price',
        }, {
            id : 'category_id',
            Header: 'Category',
            accessor: '_links.category.href', // **my problem is here**
            ...
            return (
            <div className="App">
            <ReactTable data={this.state.prod} columns={columns} filterable={true} pageSize={10}/>
                
            </div>
        );
    }
}
export default ListProd;

код json выглядит следующим образом 

 {
  "_embedded" : {
    "products" : [ {
      "id" : 1,
      "label" : "l1",
      "price" : 100,
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/products/1"
        },
        "product" : {
          "href" : "http://localhost:8080/products/1",
          "templated" : true
        },
        "Category" : {
          "href" : "http://localhost:8080/products/1/category"
        }
      }
    }, {
      "id" : 2,

Итак, проблема в том, что я получаю не значение внешнего ключа, а вместо этого URL каждой строки, вот так:
http://localhost:8080/products/1/category
для идентификатора продукта = 1 witch возвращает формат json :

 {
  "id" : 1,
  "nameCat" : "C1",
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/categories/1"
    },
    "category" : {
      "href" : "http://localhost:8080/categories/1"
    },
    "products" : {
      "href" : "http://localhost:8080/categories/1/products",
      "templated" : true
    }
  }
}

Как я могу получить значение каждой категории в списке product listProd?

Комментарии:

1. Похоже, это вопрос к серверной части. Я предполагаю, что этот вопрос должен быть помечен как Spring Boot Data? Не хотите ли вы сказать, что вы делаете запрос API к некоторой конечной точке при загрузке Spring и это ответ? Вы хотели бы, чтобы ответ отличался от отображения «href» для категорий / 1 вы могли бы сделать другой запрос API для каждого из этих идентификаторов продукта или категорий. Или вы можете изменить способ работы API.

2. Хорошо, для этого примера могу ли я отобразить в поле формы значение категории (здесь 1)