javascript - 获取键值等于 true 的键名 - reactjs

Question

嗨，我有这个 json 文件，我想只在“可见”= true 的地方获取仪表板和数据表。

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

这就是我到目前为止所做的。

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;

预期结果（仅显示）：仪表板和数据表

任何帮助将非常感激

标签： javascriptjsonreactjsaxios

Answer 1

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