How to update dropdown with JSON value from AJAX call using JQuery

Question

Hi I am receiving a JSON list in the Ajax success block and I want to assign these values to a dropdown list potentialFailureModeList present on my JSP. I am new to JSON, i have tried a lot to findout on the net but did not get anything. Please help me. Any useful link will also work.

//Code from JSP

<td><select name="fmeaEntityForm[0].potentialFailureMode.id"
                            id="potentialFailureMode0" onchange="potentialFailureModeText(this)">
                                <option value="-1"><spring:message code="label.fmea.select.potentialFailureMode" /></option>
                                <c:forEach items="${potentialFailureModeList}" var="pfm">
                                    <option value="${pfm.id}">${pfm.potentialFailureMode}</option>
                                </c:forEach>
                        <option value="0"><spring:message code="label.fmea.select.other" /></option>
                        </select></td>

//pattern receiving in ajax

{"potentialFailureModeList":[{"id":3,"potentialFailureMode":"potentialFailureMode1","remark":"1"},
             {"id":4,"potentialFailureMode":"potentialFailureMode2","remark":"2"}]}

//Ajax method function getpotentialFailureModeList(elementIdIndex) {

        if (-1 != document.getElementById("subSystem"+elementIdIndex+"").value)  {

            $.ajax({
                type: "GET",
                url: '/ISO26262/FmeaDocumentPage/potentialFailureModeList',
                data: ({subSystemId : $('#subSystem'+elementIdIndex+'').val() }),
                success: function(items) {
                    alert("success");
                    alert(items);
                    // to do task
                },
                error: function (e) {
                    alert('Error Received: ' + e);
                  },
            });
        } 
}

This can be done in a variety of ways - you should narrow this down to a more specific problem. — Fritz Duchardt
– Fritz Duchardt, Commented Dec 1, 2015 at 10:44
@FritzDuchardt I will be very thankful to you if you would provide me the links of the various existing methods.. — Ishan
– Ishan, Commented Dec 1, 2015 at 11:06

Ishan · Accepted Answer · 2015-12-01 13:16:18Z

Thanks a lot for replying. I got the answer. I am posting here, so that if anyone else need the same.

function getpotentialFailureModeList(elementIdIndex)  {

        if (-1 != document.getElementById("subSystem"+elementIdIndex+"").value)  {

            $.ajax({
                type: "GET",
                url: '/ISO26262/FmeaDocumentPage/potentialFailureModeList',
                data: ({subSystemId : $('#subSystem'+elementIdIndex+'').val() }),
                dataType:'json',
                success: function(items) {
                    var list = items;
                    $.each(list.potentialFailureModeList, function (index, item) {
                        $('#potentialFailureMode'+elementIdIndex+'').append($('<option>', {value: item.id, text: item.potentialFailureMode}));
                        })
                },
                error: function (e) {
                    alert('Error Received: ' + e);
                  },
            });
        } 
}

shakhawat · Accepted Answer · 2015-12-01 11:06:21Z

0

json should be in format of

 {id: x, value: y}

Then the ajax success function similar to this --

success: function (items) {
    $.each(items, function (index, item) {
    $('#potentialFailureMode0').append($('<option>', {value: item.id, text: item.potentialFailureMode}));
});

edited Dec 1, 2015 at 11:06

answered Dec 1, 2015 at 10:22

shakhawat

2,7231 gold badge24 silver badges37 bronze badges

2 Comments

Ishan Over a year ago

thanks a lot for your reply. Is there any method to convert my received string into the format you have mentioned. Because in the format you have mentioned double quotes are not present on the attributes.

Ishan Over a year ago

that i already corrected. but I am getting error in browser console: Uncaught TypeError: Cannot use 'in' operator to search for 'length' in {"potentialFailureModeList":[{"id":3,"potentialFailureMode":"potentialFailureMode1","remark":"1"},{"id":4,"potentialFailureMode":"potentialFailureMode2","remark":"2"}]}

Collectives™ on Stack Overflow

How to update dropdown with JSON value from AJAX call using JQuery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related