对于循环 <p> 在jQuery标签

Question

I need to loop using jQuery. Sometimes my query returns more than one row, so I want to check if the query returned more than one. I want to view all outputs in p tags (one by one). I wrote my code and it gives only the last row in my query. How can I return all rows in <p> tags? What is the error in my code?

 <p id="prodDeccarea"> </p> 

$("#slsNo").keyup(function () {
    $("#hsCode").val(null);
    $("#slsiUnit").val(null);
    var slsNo = $("#slsNo").val();
    $.ajax({
        type: 'GET',
        url: '${pageContext.request.contextPath}/restservice/ViewProd/' + slsNo,
        success: function (result) {
            var jString = JSON.stringify(result);
            var jdata = JSON.parse(jString);
            for (var x = 0; x < jdata.length; x++) {
                if (1 < jdata.length) {
                    var td1 = jdata[x].itemDesc;
                    var td2 = jdata[x].hsCode;
                    var td3 = jdata[x].slsiUnit;
                    $("#prodDeccarea").html("Your product catagory is " + jdata[x].itemDesc + ".");

                } else {
                    var td1 = jdata[x].itemDesc;
                    var td2 = jdata[x].hsCode;
                    var td3 = jdata[x].slsiUnit;
                    $("#hsCode").val(td2);
                    $("#prodDeccarea").html("Your product catagory is " + td1 + ".");
                    if (td3 == "1") {
                        $("#slsiUnit").val("UNIT1");
                    }
                    if (td3 == "2") {
                        $("#slsiUnit").val("UNIT2");
                    }
                    if (td3 == "3") {
                        $("#slsiUnit").val("UNIT3");
                    }
                    if (td3 == "4") {
                        $("#slsiUnit").val("UNIT4");
                    }
                    if (td3 == "5") {
                        $("#slsiUnit").val("UNIT5");
                    }
                    if (td3 == "6") {
                        $("#slsiUnit").val("UNIT6");
                    }
                }
            }
        }
    }
    );
});

Answer 1

You have some issues in your code

Let's analyze them :-)

You're using a condition when the array jdata 's length === 1 within the for-loop . Move that logic outside from the for-loop .

for (var x = 0; x < jdata.length; x++) {
    if (1 < jdata.length) { 
    ^

You're overriding the content of your previously call of function .html(...) . Therefore, you're losing the previous HTML.

$("#prodDeccarea").html("Your product catagory is " + td1 + ".");
                       ^

You're stringifying an already JSON String, just parse it.

var jString = JSON.stringify(result);
                   ^

You have multiple conditions to set a value according to tdr3's value. Just use that value and set it to the element. Ie: $("#slsiUnit").val("UNIT" + td3);

if (td3 == "1") { <- Here
    $("#slsiUnit").val("UNIT1");
} 
if (td3 == "2") { <- Here, and so on
    $("#slsiUnit").val("UNIT2");
}

Look at this code snippet with those fixes

 $("#slsNo").keyup(function() { $("#hsCode").val(null); $("#slsiUnit").val(null); var slsNo = $("#slsNo").val(); $.ajax({ type: 'GET', url: '${pageContext.request.contextPath}/restservice/ViewProd/' + slsNo, success: function(result) { var jString = JSON.stringify(result); var jdata = JSON.parse(jString); if (jdata.length === 1) { var td1 = jdata[0].itemDesc; var td2 = jdata[0].hsCode; var td3 = jdata[0].slsiUnit; $("#hsCode").val(td2); $("#prodDeccarea").html("Your product catagory is " + td1 + "."); $("#slsiUnit").val("UNIT" + td3); return; } for (var x = 0; x < jdata.length; x++) { var td1 = jdata[x].itemDesc; var td2 = jdata[x].hsCode; var td3 = jdata[x].slsiUnit; var $prodDeccarea = $("#prodDeccarea"); $prodDeccarea.html($prodDeccarea.html() + '<p>' + "Your product catagory is " + jdata[x].itemDesc + "." + "</p>"); } } }); }); 

Answer 2

You can use each method https://api.jquery.com/each/

$("p").each(function(element) {
  console.log(element.text);
});

This will print out the contents of all p elements in your code.

Answer 3

$.ajax({
    type: 'GET',
    url: '${pageContext.request.contextPath}/restservice/ViewProd/' + slsNo,
     dataType: "json",//if you return json data you don't need var jString = JSON.stringify(result);var jdata = JSON.parse(jString);
     beforeSend: function () {
       $("#prodDeccarea").html("");//this will clear previous results 
     },
    success: function (data) {
        $.each(data, function (i, e) {//this will loop through all the results
            $("#prodDeccarea").append("<p>RESULT " + i + " : ".JSON.stringify(e));//this will add to the at the end of #prodDeccarea
        });
    }
});

Answer 4

guess the problem is here,you didn't accumulate;

    $("#slsNo").keyup(function () {
        $("#hsCode").val(null);
        $("#slsiUnit").val(null);
        var slsNo = $("#slsNo").val();
        $.ajax({
            type: 'GET',
            url: '${pageContext.request.contextPath}/restservice/ViewProd/' + slsNo,
            success: function (result) {
                var jString = JSON.stringify(result);
                var jdata = JSON.parse(jString);
                for (var x = 0; x < jdata.length; x++) {
                    if (1 < jdata.length) {
                        var td1 = jdata[x].itemDesc;
                        var td2 = jdata[x].hsCode;
                        var td3 = jdata[x].slsiUnit;
                        //accumulate
                        $("#prodDeccarea").html($("#prodDeccarea").html()+"Your product catagory is " + jdata[x].itemDesc + ".");


                    } else {
                        var td1 = jdata[x].itemDesc;
                        var td2 = jdata[x].hsCode;
                        var td3 = jdata[x].slsiUnit;
                        $("#hsCode").val(td2);
                        $("#prodDeccarea").html("Your product catagory is " + td1 + ".");
                        if (td3 == "1") {
                            $("#slsiUnit").val("UNIT1");
                        }
                        if (td3 == "2") {
                            $("#slsiUnit").val("UNIT2");
                        }
                        if (td3 == "3") {
                            $("#slsiUnit").val("UNIT3");
                        }
                        if (td3 == "4") {
                            $("#slsiUnit").val("UNIT4");
                        }
                        if (td3 == "5") {
                            $("#slsiUnit").val("UNIT5");
                        }
                        if (td3 == "6") {
                            $("#slsiUnit").val("UNIT6");
                        }
                    }
                }
            }
        }
        );
    });