0

I want to create a bar chart using chartjs,PHP and MySql. After querying the database to get product details as a json object, now I want to iterate over the array and add product_name and price into new arrays, of which I get undefined. What might be wrong to my code?

 $(document).ready(function(){
 $.ajax({
    url: "../controller/products-chart-data.php",
    method: "GET",
    success: function(data){
        console.log(data);
        var product = [];
        var price = [];
        
        for (var i in data) {
            product.push(data[i].product_name);
            price.push(data[i].price);  
        }
        var chartData = {
            labels: product,
            datasets: [
                {
                label: "Product Price",
                backgroundColor: "rgba(200, 200, 200, 0.75)",
                borderColor: "rgba(200, 200, 200, 0.75)",
                hoverBackgroundColor: "rgba(200, 200, 200, 1)" ,
                hoverBorderColor: "rgba(200, 200, 200, 1)",
                data: price
             }
            ]
        };
        var context = $("#products-chart");
        var barGraph = new Chart(context, {
            type: 'bar',
            data: chartData
        });
    },
    error: function(data){
        console.log(data);
    }
  })
})

PHP code for the database query:

<?php

$conn = mysqli_connect('localhost', 'root', '', 'shopping_cart_with_paypal');

$getAllproductsQuery = $conn->query("SELECT * FROM tbl_products");

$data = array();
foreach ($getAllproductsQuery as $row) {
$data[] = $row;
}

$getAllproductsQuery->close();
$conn->close();

print json_encode($data);

Sample data:

[{"id":"3","product_name":"Travel 
bag","price":"5000","category_id":"1","product_image":"travel- 
bag.jpeg","average_rating_id":"3","description":"Lather travel bag, found in 
different sizes","product_code":"203"},{"id":"4","product_name":"Jewel 
Box","price":"6000","category_id":"4","product_image":"jewel- 
box.jpeg","average_rating_id":"5","description":"Modern jewel box straight  
dubai","product_code":"204"},{"id":"5","product_name":"Wooden 
Dolls","price":"9000","category_id":"5","product_image":"wooden- 
dolls.jpeg","average_rating_id":"3","description":"wooden dolls made of pure  
woods","product_code":"205"}]
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Mathew
  • 29
  • 6
  • 1
    What data do you get? What is actually `undefined`? How is PHP relevant here? – VLAZ Nov 12 '20 at 11:34
  • 1
    [There's no such thing as a "JSON Object"](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/) – Andreas Nov 12 '20 at 11:35
  • [Why is using “for…in” for array iteration a bad idea?](https://stackoverflow.com/questions/500504/why-is-using-for-in-for-array-iteration-a-bad-idea) – Andreas Nov 12 '20 at 11:36
  • If you're getting back `JSON` (ie a string) then `data[0]` is the first character so doesn't have a `.price` property, so will give `undefined`. So what *exactly* is `data`? – freedomn-m Nov 12 '20 at 11:40
  • I belive the problem is that you don't have an equal amount of product_name and price – Carsten Løvbo Andersen Nov 12 '20 at 11:40
  • i have edited the qn to include all the details i have done so far @CarstenLøvboAndersen – Mathew Nov 12 '20 at 11:52
  • i get undefined for `product` and `price` arrays@VLAZ – Mathew Nov 12 '20 at 12:17
  • i have equal amount of product_name and price, i think the problem lies on how to iterate throght the array data i received from the ajax request@CarstenLøvboAndersen – Mathew Nov 12 '20 at 12:19

0 Answers0