Hi this is my first question.

I want to filter my json object by id

This is the JSON file code I pasted below:

[
  {
  "id": 1,
  "name": "Class 1",
  "sub_informations": [
     {
     "id": 1,
     "name": "John",
     "sex": "male",
     "user": 1,
     },
     {
     "id": 2,
     "name": "Agatha",
     "sex": "female",
     "user": 1,
     }
    ]
  },
  {
  "id": 2,
  "name": "Class 2",
  "sub_informations": [
    {
    "id": 3,
    "name": "Ben",
    "sex": "male",
    "user": 2,
    }
  ]
}
]

what I want is to be able to put the sub_informations elements in the li tag according to the id.

That is, I want to bring the name and gender information of class 1 to my first li tag, and the name and gender information of class 2 to my second li tag.

How can i write this in code?

import React from 'react'
import user from 'api/users.json'
import { useState, useEffect } from 'react';

export default function App() {

    const [users, setUsers] = useState([])

    useEffect(() => {
       setTimeout(() =>setUsers (user),1000)
  return (
    <>
        {users.map((index, i) => {
        <ul>
               
                <li>{index.id[1]}</li>
                <li>{index.id[2]}</li>
  
        </ul>
        })}
    </>
  )
}

CodePudding user response：

i understand you can make list by id. I belive you can do so like this :

 return (
<>
    {users.map((index, i) => {
    <ul>   
        {
            index.id === 1 &&
            (
                <>
                    <h1>{index.name}</h1>
                    {
                        index.sub_informations.map((sub, ind) => {
                            <li>
                                {sub.name   " "   sub.sex}
                            </li>
                        })
                    }
                </>
            )
        }   
        {
            index.id === 2 &&
            (
                <>
                    <h1>{index.name}</h1>
                    {
                        index.sub_informations.map((sub, ind) => {
                            <li>
                                {sub.name   " "   sub.sex}
                            </li>
                        })
                    }
                </>
            )
        }     
    </ul>
    })}
</>

If this doesn't what you want to do , please tell us more information for we can help you.

CodePudding user response：

Assuming that OP needs to list down the sub_information under a list for each user entry/object, the below solution may achieve this assumed objective:

Code Snippet

const Thingy = ({users, ...props}) => {
  return (
    <div>
     {users.map(u => (
      <ul>
        {u.name}
        {u["sub_informations"].map(si => (
          <li>
            {si.id} {si.name} {si.sex}
          </li>
        ))}
      </ul>
     ))}
    </div>
  );
};

const rawData = [{
    "id": 1,
    "name": "Class 1",
    "sub_informations": [{
        "id": 1,
        "name": "John",
        "sex": "male",
        "user": 1,
      },
      {
        "id": 2,
        "name": "Agatha",
        "sex": "female",
        "user": 1,
      }
    ]
  },
  {
    "id": 2,
    "name": "Class 2",
    "sub_informations": [{
      "id": 3,
      "name": "Ben",
      "sex": "male",
      "user": 2,
    }]
  }
];

ReactDOM.render(
  <div>
    DEMO
    <Thingy users={rawData}/>
  </div>,
  document.getElementById("rd")
);

<div id="rd" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>

Explanation

• Iterate over users array
• For each user, iterate over sub_information array
• For each element, render it's props (such as id, name, sex, etc)

OP needs to clarify if this is not what they desired to achieve.

CodePudding user response：

The following results in a nested list by using map twice to iterate once of the users and once over the sub_informations.

const myUsers = [
  {
  "id": 1,
  "name": "Class 1",
  "sub_informations": [
     {
     "id": 1,
     "name": "John",
     "sex": "male",
     "user": 1,
     },
     {
     "id": 2,
     "name": "Agatha",
     "sex": "female",
     "user": 1,
     }
    ]
  },
  {
  "id": 2,
  "name": "Class 2",
  "sub_informations": [
    {
    "id": 3,
    "name": "Ben",
    "sex": "male",
    "user": 2,
    }
  ]
}
];

function App() {
  const [users, setUsers] = React.useState(myUsers);

  return (
    <ul>
      {users.map((user) => {
        if (!user.sub_informations) {
          return (
            <li>
              {user.id} || {user.name}
            </li>
          );
        } else {
          return (
            <React.Fragment>
              <li>
                {user.id} || {user.name}
              </li>
              <ul>
                {user.sub_informations.map((info) => (
                  <li>
                    {info.id} || {info.name} || {info.sex} || {info.user}
                  </li>
                ))}
              </ul>
            </React.Fragment>
          );
        }
      })}
    </ul>
  );
}



ReactDOM.render(<App/>, document.getElementById('root'));

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

Note: Some slight adjustments to your code where necessary to be able to put this in a snippet.