Get Key names where key values is equal to true - reactjs

Question

Hi I have this json file and i want to get the DashBoard and Datatable only where "visible" = true.

{
  "MTs": {
    "Dashboard": {
      "id": 1,
      "visible": true
    },
    "Datatable": {
      "id": 1,
      "visible": true
    },
    "Change Status": {
      "id": 1,
      "visible": false
    }
  }
}

This is what i did so far.

const DD = () => {
  useEffect(() => {
    getMenu();
  }, []);

  const [data, setData] = useState({ MTs: [] });

  const getMenu = async () => {
    try {
      const result = await axios("http://localhost:3000/file.json");
      setData(result.data);
    } catch (err) {
      alert(err.message);
    }
  };

  console.log(data);

  var contentKeys = Object.keys(data["MTs"]);
  for (const key in contentKeys) {
    console.log(`${key}: ${contentKeys[key]}`);
  }

  var val = contentKeys
    .filter(({ contentKeys }) => contentKeys !== true)
    .map((x) => {
      //   const filter = x.filter(visible => visibile !== 1);
      return <div>{x}</div>;
    });

  return <div>{val}</div>;
export default DD;

Expected result (show only): Dashboard and Datatable

Any help would be much appreciated

score 0 · Accepted Answer · answered May 13 '21 at 02:09

export default function App() {
  const data = {
    MTs: {
      Dashboard: {
        id: 1,
        visible: true
      },
      Datatable: {
        id: 1,
        visible: true
      },
      "Change Status": {
        id: 1,
        visible: false
      }
    }
  };

  const { MTs } = data;

  return Object.keys(MTs)
    .filter((property) => (MTs[property].visible ? property : false))
    .map((item) => <div>{item}</div>);
}

https://codesandbox.io/s/eager-beaver-8nzop?file=/src/App.js

Get Key names where key values is equal to true - reactjs

1 Answers1