Click here to Skip to main content
15,847,750 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have two dropdowns, machineType and machineProblem.

I want to get machine problems using machineType selected in the Dropdown, I have an API for getting data from the database collection named machinetypeproblems.

I want to show all the machineProblems that belong to the machineType that is selected in drop down. I have tried something but I didn't get the results I wanted and I am having problems when I select the machineType from the Dropdown, the page becomes a blank white page.

Here is the code that I have tried:

API in the backend:

What I have tried:

JavaScript
router.get("/problemtype-by-machinetype", async (req, res) => {
  try {
    const machineType = req.query.machineType; // Get the selected machine type from the query parameters
    console.log(machineType, "machine type :");
    // Query the problem types based on the selected machine type
    const data = await ProblemType.find({ machineType });
    //data.reverse();
    console.log("sahil :" ,data);
    res.json({
      statusCode: 200,
      data: data,
      message: "Read Problem Types by Machine Type",
    });
  } catch (error) {
    res.json({
      statusCode: 500,
      message: error.message,
    });
  }
});


Here is the front end:

JavaScript
//   auto form fill up in edit
  let seletedEditData = async (datas) => {
    setModalShowForPopupForm(true);
    setId(datas._id);
    setEditData(datas);
  };
  const [selectedMachineType, setSelectedMachineType] = useState([]);

// Update the "Machine Type" dropdown's onChange handler
const handleMachineTypeChange = (event) => {
  setSelectedMachineType(event.target.value);
};

  // machine type
  let [macineTypeData, setMachineTypeData] = useState([]);
  let getmacineTypData = async () => {
    let response = await axios.get(
      "http://localhost:5000/machinetype/machine-type"
    );
    setMachineTypeData(response?.data?.data);
  };
  // Problem type
  let [problemTypeData, setProblemTypeData] = useState([]);
  let getProblemTypData = async () => {
    try {
      const response = await axios.get(
        "http://localhost:5000/machinetype/problemtype-by-machinetype",
        {
          params: { machineType: selectedMachineType }, // Pass the selected machine type
        }
      );
      setProblemTypeData(response?.data?.data);
      console.log("response data : ", response?.data?.data)
    } catch (error) {
      console.error(error);
    }
  };

  React.useEffect(() => {
    getmacineTypData();
    getProblemTypData();
  }, [selectedMachineType]);

//return function

                  <div className="w-100 mt-3">
                    <TextField
                      fullWidth
                      size="small"
                      select
                      label="Select City"
                      name="engineerCity"
                      value={values.engineerCity}
                      onBlur={handleBlur}
                      onChange={handleChange}
                    >
                      <MenuItem>Select City</MenuItem>
                      <MenuItem 
                      value="Bhavnagar">Bhavnagar</MenuItem>
                      <MenuItem value="Surat">Surat</MenuItem>
                    </TextField>
                    {touched.engineerCity && errors.engineerCity ? (
                      <div className="text-danger"> 
                       {errors.engineerCity}</div>
                    ) : null}
                  </div>
                  <div className="w-100 mt-3">
                    <FormControl fullWidth>
                      <InputLabel size="small">Machine 
                      Type</InputLabel>
                      <Select
                        multiple
                        size="small"
                        name="machineType"
                        value={selectedMachineType}
                        onChange={handleMachineTypeChange}
                        input={<OutlinedInput label="Machine Type" />}
                        renderValue={(selected) => selected.join(", ")}
                        onBlur={handleBlur}
                        MenuProps={MenuProps}
                      >
                        {macineTypeData?.map(({ machineType }) => (
                          <MenuItem key={machineType} 
                           value={machineType}>
                            <Checkbox
                              checked={
                                selectedMachineType.indexOf(machineType) > -1
                              }
                            />
                            <ListItemText primary={machineType} />
                          </MenuItem>
                        ))}
                      </Select>
                    </FormControl>
                    {touched?.machineType && errors?.machineType ? (
                      <div className="text-danger"> 
                       {errors?.machineType}</div>
                    ) : null}
                  </div>

                  <div className="w-100 mt-3">
                    <FormControl fullWidth>
                      <InputLabel size="small"
                          >Machine Problem</InputLabel>
                      <Select
                        multiple
                        size="small"
                        name="machineProblem"
                        value={values.machineProblems}
                        onChange={handleChange}
                        input={<OutlinedInput label="Machine Problem" />}
                        renderValue={(selected) => selected.join(", ")}
                        onBlur={handleBlur}
                        MenuProps={MenuProps}
                      >
                        {problemTypeData?.map(({ machineProblems }) => (
                          <MenuItem key={machineProblems} 
                          value={machineProblems}>
                            {console.log("machine problem :", machineProblems)}
                            <Checkbox
                              checked={
                                Array.isArray(values.machineProblems) && 
                       values.machineProblem.indexOf(machineProblems) > -1
                              }
                            />
                            <ListItemText primary={machineProblems} />
                          </MenuItem>
                        ))}
                      </Select>
                    </FormControl>
                    {touched.machineProblem && errors.machineProblem ? (
                      <div className="text-danger"> 
                              {errors.machineProblem}</div>
                    ) : null}
                  </div>


Here is the model for database collection:

JavaScript
const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const machineTypeProblems = new Schema({
  machineProblems: { type: Array },
  machineType: { type: Array },
  createAt: { type: String },
  upadateAt: { type: String },
});

module.exports = mongoose.model("machinetypeproblems", machineTypeProblems);


I want to show machineProblem in the dropdown for the machine problems.

Here is the data in JSON format in database collection:


JavaScript
{
  "_id": {
    "$oid": "651ea9684467845cbda8385d"
  },
  "machineProblems": [
    {
      "id": 1,
      "machineProblem": " program does not open / પ્રોગ્રામ ખૂલતો નથી "
    },
    {
      "id": 2,
      "machineProblem": "Earthing check / અર્થિંગ ચેક "
    }
  ],
  "machineType": [
    "OFFICE WORK"
  ],
  "__v": 1
}
Posted
Updated 25-Oct-23 11:51am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900