Question

仅使用对象数组中的一个对象显示所有数据

2020-08-23

519

javascript reactjs

我是 Java 和 React 的新手。我从后端获取此数据。

{
    "id": 1,
    "uName": "Example GmbH",
    "uAdresse": {
        "id": 2,
        "str": "Dieselstr",
        "strNum": "160",
        "plz": 48147,
        "ort": "Münster"
    },
    "eMail": "[email protected]",
    "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;

我收到此错误： TypeError：undefined 不是对象（评估“unternehmen['uAngebot'].find”）

出了什么问题？

Answer 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": "[email protected]",
                "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

            }

Answer 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": "[email protected]",
  "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);