Unable to display data from Database

choudhmh — Wed, 28 Feb 2024 08:51:08 +0000

Hello;
I’m using React with axios and mysql. I’m trying to display data from the database. I’m managed to fetch the data and it shows the fetch data on my console.
But for some reason i’m finding it diffcult to show that fetched data on my webpage. I’ve looked around for issues but none seem to lead me to any help.

The Front end

const Display = () => {
  const [user, setUser] = useState([]);

  useEffect(() => {
    axios
      .get("http://localhost:8081/login")
      .then((res) => {
        console.log(res.data); // debugging
        // Set user to res.data.user if it's an array, else set to an empty array
        setUser(Array.isArray(res.data.user) ? res.data.user : []);
      })
      .catch((err) => console.log(err));
  }, []);


  const userDetails = user.map((item) => (
    <tr key={item.id}> 
      <td>{item.id}</td>
      <td>{item.name}</td>
      <td>{item.email}</td>
      <td>{item.password}</td>
    </tr>
  ));

  return (
    <div>
      Update
      <div>
        <table className="table"> 
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">Email</th>
              <th scope="col">Password</th>
            </tr>
          </thead>
          <tbody>
            {userDetails}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Display;

The backend server code

app.get('/login', (req, res) =>{
    const sql = "SELECT * FROM login";
    db.query(sql, (err, data) => {
        if (err) {
            console.error(err);
            return res.json({ error: 'An error occurred' });
        }

        console.log(data);
        return res.json({ success: true, data: data });
    });
})

Face Detection

choudhmh — Wed, 17 May 2023 09:12:48 +0000

Good Day,
Hoping someone can direct me. I've written this code in React to identify faces using the webcam from set images stored a the labels folder and also to identify emotions from the faces detected.

I need guidance on how i can rewrite the function in react (at the moment in JS) The faces cannot be identified, not sure where i am going wrong but it cannot match the faces from the labels folder to identify which face is which. I'm new to React. I

I also getting emotions from the face to working and it shows up but not he identification. Below is part of the code which needs to be rewritten in React which i'm not sure how to do:

useEffect(() => {
    startVideo();
    videoRef && loadModels();
    getLabeledFaceDescriptions();
  }, []);



  function getLabeledFaceDescriptions() {

    const labels = [
      "Bibinur",
      "Emunrich",
      "Mukthar",
      "Nursultan Ahmetsha",
      "Mahmud",
      "Kayrbek",
      "Saltanat",
      "Ablay",
      "Makkabhat",
      "Sandugash_8B",
      "Makhabbat_Zharimbetova",
      "Kamilya_Nuryshova",
    ];
    return Promise.all(
      labels.map(async (label) => {
        const descriptions = [];
        //const expression = [];
        for (let i = 1; i <= 2; i++) {
          const img = await faceapi.fetchImage(`/labels/${label}/${i}.png`);

          const labeledFaceDescriptors = await getLabeledFaceDescriptions();
          const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors);

          const detections = await faceapi
            .detectSingleFace(img)
            .withFaceLandmarks()
            .withFaceExpressions()
            .withFaceDescriptor();
          descriptions.push(detections.descriptor);

          console.log(detections.descriptor)


        }
        return new faceapi.LabeledFaceDescriptors(label, descriptions);

      })

    );

    }

  return (
    <div>
      <video crossOrigin="anonymous" ref={videoRef} autoPlay></video>
    </div>
  );
}

export default App;

DEV Community: choudhmh

Unable to display data from Database

Face Detection