CODEWITHSUNDEEP
javascriptjqueryajax
MrTacosMx
MrTacosMx

Reputation: 33

how populate select with json data?

I am practicing a shopping cart list but I cannot populate the select I have tried several times but without success. Any guidance would be appreciated.

PHP:

$get_cart =  mysqli_query($link,"SELECT cpro_id,cpro_name,cpro_price,cpro_qty FROM cart WHERE owner='$client'");
$rows = array();
while($r = mysqli_fetch_assoc($get_cart)) {
$rows[] = $r;
}
echo json_encode(array("status"=>"OK","data"=>$rows));
return true;

server response:

{"status":"OK","data":[
{"cpro_id":"9","cpro_name":"Product1","cpro_price":"10.00","cpro_qty":"1"},
{"cpro_id":"10","cpro_name":"Product2","cpro_price":"10.00","cpro_qty":"1"},
{"cpro_id":"11","cpro_name":"Product3","cpro_price":"10.00","cpro_qty":"1"},
{"cpro_id":"12","cpro_name":"Product4","cpro_price":"10.00","cpro_qty":"1"},
{"cpro_id":"13","cpro_name":"Product5","cpro_price":"10.00","cpro_qty":"1"}
]}

JS/HTML:

<select name="info" size="1" id="info" style="display:block;width: 100%;">
  <option selected value="cpro_id">cpro_name</option>
</select>
<script>
$(document).ready(function() {
  $.ajax({
      method: "POST",
      dataType: "JSON",
      data: {
        action: 'getcart'
      },
      url: "api.php"
    })
    .done(function(cart) {
      //fill list
    });
});
</script>

Upvotes: 3

Views: 51

Answers (1)

Pedram
Pedram

Reputation: 16575

You can easily populate your json data with $.each like below example:

let obj = {
  "status": "OK",
  "data": [{
      "cpro_id": "9",
      "cpro_name": "Product1",
      "cpro_price": "10.00",
      "cpro_qty": "1"
    },
    {
      "cpro_id": "10",
      "cpro_name": "Product2",
      "cpro_price": "10.00",
      "cpro_qty": "1"
    },
    {
      "cpro_id": "11",
      "cpro_name": "Product3",
      "cpro_price": "10.00",
      "cpro_qty": "1"
    },
    {
      "cpro_id": "12",
      "cpro_name": "Product4",
      "cpro_price": "10.00",
      "cpro_qty": "1"
    },
    {
      "cpro_id": "13",
      "cpro_name": "Product5",
      "cpro_price": "10.00",
      "cpro_qty": "1"
    }
  ]
};

$.each(obj.data, function(i, v) {
  $('#info').append('<option value="' + v.cpro_id + '">' + v.cpro_name + '</option>')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="info" size="1" id="info" style="display:block;width: 100%;">
  <option selected value="cpro_id">cpro_name</option>
</select>

In your code:

$.ajax({
    method: "POST",
    dataType: "JSON",
    data: {
      action: 'getcart'
    },
    url: "api.php"
  })
  .done(function(cart) {
    $.each(cart.data, function(i, v) {
      $('#info').append('<option value="' + v.cpro_id + '">' + v.cpro_name + '</option>')
    });
});

Upvotes: 2

Related Questions