How to get the property's name of an object using jQuery?

AliF
August 12, 2024
108 views
2 votes
3 Answers

this is my form:

<form id="inventoryForm" action="/ManderalMatrix/AddManderalInventory" class="reactiveToButton">
    <div class="row" style="margin-top: 18px">

        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Size of punch (mm)
                    <span style="color:red">*</span>
                </label>
                <input name="PunchSize" id="PunchSize" type="text" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Shape
                    <span style="color:red">*</span>
                </label>
                <select name="ProductConfigId" id="ProductConfigId" class="form-control objectInput">
                </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Radius of punch (mm)
                    <span style="color:red">*</span>
                </label>
                <input name="PunchRadius" id="PunchRadius" type="number" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Code
                    <span style="color:red">*</span>
                </label>
                <input name="ManderalMatrixCode" id="ManderalMatrixCode" type="number" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Quantity of upper punch
                    <span style="color:red">*</span>
                </label>
                <input name="UpperPunchQuantity" id="UpperPunchQuantity" type="number" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Quantity of die
                    <span style="color:red">*</span>
                </label>
                <input name="DieQuantity" id="DieQuantity" type="number" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Quantity of lower punch
                    <span style="color:red">*</span>
                </label>
                <input name="LowerPunchQuantity" id="LowerPunchQuantity" type="number" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Supplier
                    <span style="color:red">*</span>
                </label>
                <input name="Supplier" id="Supplier" type="text" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Manufacturer code
                    <span style="color:red">*</span>
                </label>
                <input name="ManufacturerCode" id="ManufacturerCode" type="text" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Type of die
                    <span style="color:red">*</span>
                </label>
                <select name="DieType" id="DieType" class="form-control objectInput">
                    <option value="1">B</option>
                    <option value="2">D</option>
                </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>Location</label>
                <select name="PlanConfigId" id="PlanConfigId" class="form-control objectInput">
                </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>Machine name</label>
                <select name="MachineId" id="MachineId" class="form-control objectInput">
                </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Large diameter
                    <span style="color:red">*</span>
                </label>
                <input name="LargeDiameter" id="LargeDiameter" type="number" class="form-control inventoryInput objectInput" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>
                    Small diameter
                    <span style="color:red">*</span>
                </label>
                <input name="SmallDiameter" id="SmallDiameter" type="number" class="form-control inventoryInput objectInput" />
            </div>
        </div>

    </div>

</form>

I set the class ‘objectInput’ for all inputs and selects to controlling them.
I used ajax to get an object from the server and get data.
I want to check if the name of the properties of ‘data’ that returned is equal to the id of the inputs, put the value of data’s property on the input’s value

I tried this but I dont know the rest:

function UpdateInventory(id) {

    $.get("/ManderalMatrix/GetTheInventory?id=" + id, function (data) {
        $('.objectInput').each(function () {

        })
    })
}

Answers

- MansiJani
- August 11, 2024 at 10:05 am
- 0 votes
0
To get the result I think you can try this, you need to loop through the form elements with the class objectInput, also can check if their id matches any property names in the data object,if yes, set the value of the input to the corresponding value from data.
```
function UpdateInventory(id) {
    $.get("/ManderalMatrix/GetTheInventory?id=" + id, function (data) {
        $('.objectInput').each(function () {
            var $this = $(this); 
            var inputId = $this.attr('id'); 
            if (data.hasOwnProperty(inputId)) {
                $this.val(data[inputId]); 
            }
        });
    });
}
```
Login or Signup to reply.

- MdFaridUddinKiron
- August 12, 2024 at 5:37 am
- 0 votes
0
I set the class ‘objectInput’ for all inputs and selects to
controlling them. I used ajax to get an object from the server and get
data. I want to check if the name of the properties of ‘data’ that
returned is equal to the id of the inputs, put the value of data’s
property on the input’s value

I tried this but I dont know the rest:

According to your shared code snippet, I have tried to simulate the scenario.

It can be achieved by iterating over each of the input/select element with the class objectInput and checking if the id of the element matches a property name in the data object.

Next, If they match, you can set the value of the input/select element to the corresponding value from the data object.

Let say, you have following response from controller:
```
[HttpGet]
public IActionResult GetTheInventory(int id)
{
    // Sample data that mimics what you might return from a database
    var inventory = new
    {
        PunchSize = "12.5",
        ProductConfigId = "1",
        PunchRadius = 3.5,
        ManderalMatrixCode = 123456,
        UpperPunchQuantity = 50,
        DieQuantity = 100,
        LowerPunchQuantity = 50,
        Supplier = "Supplier A",
        ManufacturerCode = "M12345",
        DieType = 2,
        PlanConfigId = "2",
        MachineId = "3",
        LargeDiameter = 15,
        SmallDiameter = 10
    };

    return Json(inventory);
}
```
So, you could accomplish your UpdateInventory by looping over the response object as following:
```
function UpdateInventory(id) {
    $.get("/JqueryAcceeObjectName/GetTheInventory?id=" + id, function (data) {
        console.log("Data received from API:", data);

        $('.objectInput').each(function () {
            var inputId = $(this).attr('id');
            if (data.hasOwnProperty(inputId)) {
                console.log("Match found for:", inputId, " | Setting value:", data[inputId]);
                $(this).val(data[inputId]);
            } else {
                console.log("No match found for:", inputId);
            }
        });
    });
}
```
Output:

Note: You should also be aware of the response model object naming convension and your Id property naming convension. Because if they doesn’t matched the value in the form might not populate accordingly. I telling this, becuase When I was testing I noticed, you have keep the property name as pascal case like PunchSize but I json response usually in camelCase.like punchSize. So double check the response property name along with the form property name.
Login or Signup to reply.

I would not be forcing id and class for this. Use a data attribute instead. Leave class for styling and leave id independent from the data structure.

Change your html to something similar to:

<input name="PunchSize" id="PunchSize" data-field-name="punchSize" type="text" class="form-control inventoryInput" />

Then you can use the following javascript/jquery

function UpdateInventory(id) {
    $.get("/ManderalMatrix/GetTheInventory?id=" + id, function (data) {
      //Finds all fields with our data attribute, for more info see "Attribute Selectors"
      $('[data-field-name]').each(function () {
         //Get the field name from the data attribute
         let fieldName = this.dataset.fieldName;
         //Check it exists in the data
         if(data.hasOwnProperty(fieldName)){
            //Populate the field
            $(this).val(data[fieldName]);
         }
    })
  })
}

Please signup or login to give your own answer.

Click here to cancel reply.