Блог

Я новичок в 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’)

Что не так?

из вашего 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

            }  

Предполагая, что упомянутый вами объект назван как 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);