Returning an object which is inside an array of another object-CodePudding

I am connecting to an api and returning some data on screen using the below:

return (

    <>

        {Object.values(items).map((item, index) => {
        return <pre>{JSON.stringify(item, null, 2)}</pre>

    </>

})}

This returns an object to the front end that looks like this.

[
  {
    "type": "player",
    "id": "account.ac12c743e8044d42a6eafeffa2c3a8cf",
    "attributes": {
      "name": "Steve1989",
      "stats": null,
      "titleId": "pubg",
      "shardId": "stadia",
      "patchVersion": ""
  },
  "relationships": {
      "assets": {
      "data": []
  },
  "matches": {
      "data": [
      {
        "type": "match",
        "id": "473019a4-fe3b-420a-b00e-b99ff2cd8c73"

I would like to as an example get just the id as shown below:

"id": "account.ac12c743e8044d42a6eafeffa2c3a8cf"

However I have an object with an array of objects inside of it and I don't know how to access this.

I am familiar with the array map function which I believe I need to use, but I don't know how to get inside that array in the object being returned.

I'm therefore struggling to see how I get at this value.

CodePudding user response：

Assign stringify data to the variable and then you can convert JSON stringify data into parse data using this: JSON.parse then fetch the data:

Below is the example:

const obj = {name: "John", age: "30", city: "New York"};

const myJSON = JSON.stringify(obj);
var c = JSON.parse(myJSON);

console.log(c.name);

Please try it and let me know if you find any issue

CodePudding user response：

You can get all ids from array of objects like

const data = [
  {
    type: "player",
    id: "account.ac12c743e8044d42a6eafeffa2c3a8cf",
    attributes: {
      name: "Steve1989",
      stats: null,
      titleId: "pubg",
      shardId: "stadia",
      patchVersion: ""
    },
    relationships: {
      assets: {
        data: []
      }
    }

    //some other values
  },
  {
    type: "player",
    id: "account.bc24c743e8044d42a6eafeffa2c3a8cf",
    attributes: {
      name: "John133",
      stats: null,
      titleId: "pubg",
      shardId: "stadia",
      patchVersion: ""
    },
    relationships: {
      assets: {
        data: []
      }
    }

    //some other values
  }
];


const App = props => (
    <div className="App">
    <div>
    <h2>This shows all</h2>
    {data.map((item) => (
        <li key={item.id}>{item.id}</li>
      ))}
    </div>
    
    <div>
    <h2>This shows only one</h2>
    {data[0].id}
    </div>
      
    </div>
);

// Render it
ReactDOM.render(
    <App />,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

I have also attached the solution to get only specific index.