how populate select with json data?

Question

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>

How is this question relevant to PHP? Also, when posting code, make sure it's properly formatted (like indent the code) or it's really hard to read it and follow the flow of the code. You should also include your attempt together with an explanation of the issue you're facing. We're glad to help you sort out issues with your code, but we're not here to just write it for you. — M. Eriksson
– M. Eriksson, Commented Jan 11, 2020 at 8:24
Are you having issues with the PHP code? If not, then there's no need to post it and that tag should still be removed. — M. Eriksson
– M. Eriksson, Commented Jan 11, 2020 at 8:40

Pedram · Accepted Answer · 2020-01-11 08:30:01Z

2

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>')
    });
});

answered Jan 11, 2020 at 8:30

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MrTacosMx Over a year ago

thank so much! it works yay I need more practice with jquery :)

Pedram Over a year ago

@Ajith They spend their reputation for fun :)

Collectives™ on Stack Overflow

how populate select with json data?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related