Retrieve a particular value from Rest Api using react js-CodePudding

I have a Rest Api from which I have to retrieve the value which is after clusters in links->href which is '00000000000000000000000000000000'. so how to get that particular value?

[{
"analysisUnits": [
  {
    "links": [
      {
        "href": "http://127.0.0.1/api/v1/clusters/00000000000000000000000000000000/aus/e6ec00e6da1c46c2a1060b3b8ae54765",
        "rel": "self"
      }
    ],
    "name": "OZL6106W",
    "uuid": "e6ec00e6da1c46c2a1060b3b8ae54765"
  }
],
"links": [
  {
    "href": "http://127.0.0.1/api/v1/clusters/00000000000000000000000000000000",
    "rel": "self"
  }
],
"name": "MTS Recording Cluster",
"recordingUnits": [],
"uuid": "00000000000000000000000000000000"}]

CodePudding user response：

const data = [{
  "analysisUnits": [
    {
      "links": [
        {
          "href": "http://127.0.0.1/api/v1/clusters/00000000000000000000000000000000/aus/e6ec00e6da1c46c2a1060b3b8ae54765",
          "rel": "self"
        }
      ],
      "name": "OZL6106W",
      "uuid": "e6ec00e6da1c46c2a1060b3b8ae54765"
    }
  ],
  "links": [
    {
      "href": "http://127.0.0.1/api/v1/clusters/00000000000000000000000000000000",
      "rel": "self"
    }
  ],
  "name": "MTS Recording Cluster",
  "recordingUnits": [],
  "uuid": "00000000000000000000000000000000"}]


const link = data[0].links[0].href.split('/'); 
console.log(link[link.length - 1])

CodePudding user response：

useParams .

useParams returns an object of value pairs of URL parameters.

import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
useParams,
} from "react-router-dom";

function BlogPost() {
let { id } = useParams();
return <div style={{ fontSize: "50px" }}>
        Now showing post {id}
        </div>;
}

function Home() {
return <h3>home page </h3>;
}

function App() {
return (
    <Router>
    <Switch>
        <Route path="/page/:id">
        <BlogPost />
        </Route>
        <Route path="/">
        <Home />
        </Route>
    </Switch>
    </Router>
);
}

export default App;