#javascript #reactjs
#javascript #reactjs
Вопрос:
Я новичок в Java и react. Я получаю эти данные из серверной части.
{
"id": 1,
"uName": "Example GmbH",
"uAdresse": {
"id": 2,
"str": "Dieselstr",
"strNum": "160",
"plz": 48147,
"ort": "Münster"
},
"eMail": "info@example.de",
"telNummer": "0000000000",
"uDescription": "Lorem ipsum dolor sit amet, consectetur adipisici elit...",
"uAngebot": [
{
"id": 3,
"sTitle": "Lorem ipsum",
"sText": "Lorem ipsum dolor sit amet, consectetur adipisici elit..."
},
{
"id": 4,
"sTitle": "Lorem ipsum",
"sText": "Lorem ipsum dolor sit amet, consectetur adipisici elit..."
},
{
"id": 5,
"sTitle": "Lorem ipsum",
"sText": "Lorem ipsum dolor sit amet, consectetur adipisici elit..."
}
{
....
}
]
}
Я могу извлекать и сопоставлять данные и отображать результат (http://localhost:8080/unternehmen/1 ). Все в порядке.
Теперь я хочу отображать данные, но только с одним объектом из «uAngebot». Маршрутизация больше, чем, например http://localhost:8080/unternehmen/1/uAngebot/3 . Любая помощь высоко ценится.
Редактировать:
//unternehmenTest.jsx
import React, { Component } from 'react';
const API = 'http://localhost:8080/';
const DEFAULT_QUERY = 'unternehmen/';
class UnternehmenTest extends React.Component {
constructor(props) {
super(props);
this.state = {
id: props.id,
unternehmen: [],
isLoading: false,
};
}
componentDidMount() {
this.setState({ isLoading: true });
fetch(API DEFAULT_QUERY this.state.id)
.then(response => response.json())
.then(data => this.setState({ unternehmen: data, isLoading: false }));
}
render() {
var unternehmen = this.state.unternehmen;
console.log(unternehmen) // whole object is in console
var requiredAngebot = unternehmen['uAngebot'].find(element => element['id'] === 3);
console.log('requiredAngebot', requiredAngebot);
return (
<div>hello</div>
);
}
}
export default UnternehmenTest;
Я получаю эту ошибку:
Ошибка типа: неопределенный не является объектом (вычисление ‘unternehmen[‘uAngebot’].find’)
Что не так?
Комментарии:
1.Вы пробовали в react router. Проблема с маршрутизацией. reactrouter.com/web/example/recursive-paths reactrouter.com/web/example/route-config Этот пример поможет вам
2. Можете ли вы загрузить код на github или куда-нибудь еще? Как сказал @ShubhamVerma, react-router — это решение, но я не уверен, используете ли вы его уже.
Ответ №1:
из вашего usrl: http://localhost:8080/unternehmen/1/uAngebot/3 вы можете проанализировать последние 2 элемента: uAngebot / 3
Я создал пользовательскую функцию: getdata (input), где input = uAngebot / 3
так что, если вы console.log(getdata('uAngebot/3'))
получите этот пертикулярный результат.
проверьте результат: нажмите на кнопку выполнить фрагмент кода
var data = {
"id": 1,
"uName": "Example GmbH",
"uAdresse": {
"id": 2,
"str": "Dieselstr",
"strNum": "160",
"plz": 48147,
"ort": "Münster"
},
"eMail": "info@example.de",
"telNummer": "0000000000",
"uDescription": "Lorem ipsum dolor sit amet, consectetur adipisici elit...",
"uAngebot": [
{
"id": 3,
"sTitle": "Lorem ipsum",
"sText": "Lorem ipsum dolor sit amet, consectetur adipisici elit..."
},
{
"id": 4,
"sTitle": "Lorem ipsum",
"sText": "Lorem ipsum dolor sit amet, consectetur adipisici elit..."
},
{
"id": 5,
"sTitle": "Lorem ipsum",
"sText": "Lorem ipsum dolor sit amet, consectetur adipisici elit..."
},
]
}
console.log(getdata('uAngebot/3'))
function getdata(input) {
result = {}
obj_key = input.split("/")[0];
id = input.split("/")[1];
data[obj_key].forEach ( v => {
if (v.id == id){
result = v
}
})
return result
}
Комментарии:
1. Спасибо. То, что я хочу, это один объект из uAngebot и остальные данные, например, uName, uAdresse.
2. Я действительно не понимаю вашего вопроса. можете ли вы отправить образец, какой объект вы хотите? сначала я подумал, что ‘ localhost: 8080 /unternehmen /1 / uAngebot / 3 ‘ означает, что вам нужны данные -> uAngebot -> id = 3 . вот почему я отправляю вам вышеупомянутый пример. поэтому, если вы отправите структуру объекта, которую вы хотите, я постараюсь изо всех сил. если вы считаете ответ полезным, проголосуйте за. Спасибо
3. Используете ли вы какой-либо фреймворк вроде react или vanila js??
4. Потому что вам нужно проанализировать URL, а затем передать последние 2 параметра (например: uAngebot / 3) в созданную мной функцию.
5. да, я использую react. Массив uAngebot не содержит только 3 объектов, он может содержать 0 или 100.
Ответ №2:
Предполагая, что упомянутый вами объект назван как unternehmen
, вы можете найти конкретный объект в uAngelbot
массиве следующим образом:
let requiredAngelbot = unternehmen['uAngebot'].find(element => element['id'] === 3);
Если вы ищете маршрутизацию, это может помочь -> https://reactrouter.com/web/example/nesting
var unternehmen = {
"id": 1,
"uName": "Example GmbH",
"uAdresse": {
"id": 2,
"str": "Dieselstr",
"strNum": "160",
"plz": 48147,
"ort": "Münster"
},
"eMail": "info@example.de",
"telNummer": "0000000000",
"uDescription": "Lorem ipsum dolor sit amet, consectetur adipisici elit...",
"uAngebot": [
{
"id": 3,
"sTitle": "Lorem ipsum",
"sText": "Lorem ipsum dolor sit amet, consectetur adipisici elit..."
},
{
"id": 4,
"sTitle": "Lorem ipsum",
"sText": "Lorem ipsum dolor sit amet, consectetur adipisici elit..."
},
{
"id": 5,
"sTitle": "Lorem ipsum",
"sText": "Lorem ipsum dolor sit amet, consectetur adipisici elit..."
}
]
};
var requiredAngelbot = unternehmen['uAngebot'].find(element => element['id'] === 3);
console.log(requiredAngelbot);
Комментарии:
1. Я получаю ошибку «TypeError: undefined не является объектом (вычисление ‘unternehmen[‘uAngebot’].find’)».
2. Хорошо, спасибо. Я отредактировал свой пост. Мне нужно извлечь мои данные. Не могли бы вы, пожалуйста, сказать, что не так с моим примером?