Javascript - Json使用codeigniter从表中获取值

Question

I am new in ajax and json. and in my select option i have list of products there. and if i press any of the product it will show its price and the supplier. but what happened to my code is it shows both product and supplier but not in there specific fields. Here is the Example
The 550.00 is the price and asdadsadsadsadsadsad there is the name of the supplier. so the output must be in their specific fields.

JAVASCRIPT

    $("#prod-names").change(function(){
    var prodid = $("#prod-names option:selected").attr("value");
    $.ajax({
        url: "http://localhost:800/client_ayos/administrator/createpromoajax/"+prodid,
        type: "POST",


        success: function(data){
            console.log(data);
            var json = JSON.parse(data);

            $("#orig-price").val(json); //val =  value of #orig-price
            $("#supplier").val(json); //val =  value of #orig-price

        },
        error: function (jqXHR, textStatus, errorThrown){
                    alert('Error !');
                }
    })
});

CONTROLLER

    public function createpromoajax($id){
    //echo json_encode($this->uri->segment(3));
    $data['productid'] = $this->AdminModel->get_prodid($id);

    $price = $data['productid']->price;
    $supplier = $data['productid']->supplier;

    $ajaxproduct = array(
        $data['productid']->price,
        $data['productid']->supplier,
        );


    echo json_encode($ajaxproduct);

}

PS: I've also encountering this kind of error but still it shows the correct output but not in the specific fields

VM13100:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0

Thanks in advance.