JSON : Convert Json For Chart CanvasJS

Question

I'm working with chart using Canvas JS , I have problem to fetch data . I have result json_encode() like this :

[{“jumlah_berita”:2,”nama_kategori”:”Music”},{“jumlah_berita”:1,”nama_kategori”:”Sport”},{“jumlah_berita”:1,”nama_kategori”:”Agama”},{“jumlah_berita”:0,”nama_kategori”:”Teknologi”},{“jumlah_berita”:1,”nama_kategori”:”Pendidikan”},{“jumlah_berita”:0,”nama_kategori”:”Cinta”},{“jumlah_berita”:0,”nama_kategori”:”coba test”}]

I already read documentation Canvas JS about Accepted Data CanvasJS, It's mean my json not valid.

My Question is, How to convert JSON

From:

[
 {“jumlah_berita”:2,”nama_kategori”:”Music”}, 
 {“jumlah_berita”:1,”nama_kategori”:”Sport”}, 
 {“jumlah_berita”:1,”nama_kategori”:”Agama”}, 
 {“jumlah_berita”:0,”nama_kategori”:”Teknologi”}, 
 {“jumlah_berita”:1,”nama_kategori”:”Pendidikan”}, 
 {“jumlah_berita”:0,”nama_kategori”:”Cinta”}, 
 {“jumlah_berita”:0,”nama_kategori”:”coba test”}
]

To :

[{y:2,label:"Music"},
{y:1,label:"Sport"},
{y:1,label:"Agama"},
{y:0,label:"Teknologi"},
{y:2,label:"Pendidikan"}]

Thank's

It's My code to make Chart

<script>
    window.onload = function() {
        var tampil_kategori = '<?= $tampil_kategori ?>';
        var newdataPoints = JSON.parse(tampil_kategori);
        var jumlahBerita = new CanvasJS.Chart("chartContainer2", {
            animationEnabled: true,
            theme: "light2", // "light1", "light2", "dark1", "dark2"
            title: {
                text: "Jumlah Berita(per Kategori)"
            },

            data: [{
                type: "column",
                dataPoints: newdataPoints
            }]
        });

        jumlahBerita.render();

    }
</script>

Possible duplicate of [Changing the key name in an array of objects?](https://stackoverflow.com/questions/6809659/changing-the-key-name-in-an-array-of-objects) — Heretic Monkey, Sep 18 '19 at 00:22

Danny Buonocore · Accepted Answer · 2019-09-18T00:19:36.070

You can use map:

const to = from.map(item => ({
  y: item.jumlah_berita,
  label: item.nama_kategori
}));

EDIT

window.onload = function() {
    var tampil_kategori = [
       {“jumlah_berita”:2,”nama_kategori”:”Music”}, 
       {“jumlah_berita”:1,”nama_kategori”:”Sport”}, 
       {“jumlah_berita”:1,”nama_kategori”:”Agama”}, 
       {“jumlah_berita”:0,”nama_kategori”:”Teknologi”}, 
       {“jumlah_berita”:1,”nama_kategori”:”Pendidikan”}, 
       {“jumlah_berita”:0,”nama_kategori”:”Cinta”}, 
       {“jumlah_berita”:0,”nama_kategori”:”coba test”}
    ];

    // map here --------------------------------
    var newdataPoints = tampil_kategori.map(item => ({
        y: item.jumlah_berita,
       label: item.nama_kategori
    }));
    // -----------------------------------------

    var jumlahBerita = new CanvasJS.Chart("chartContainer2", {
        animationEnabled: true,
        theme: "light2", // "light1", "light2", "dark1", "dark2"
        title: {
            text: "Jumlah Berita(per Kategori)"
        },

        data: [{
            type: "column",
            dataPoints: newdataPoints
        }]
    });

    jumlahBerita.render();

}

`var tampil_kategori = '= $tampil_kategori ?>';` `const to = tampil_kategori.map(item => ({ y: item.jumlah_berita, label: item.nama_kategori }));` . I'm already follow but i get error , `Uncaught TypeError: tampil_kategori.map is not a function` — Zeffry Reynando, Sep 18 '19 at 00:16
updated answer, maybe that's more clear. If `newdataPoints` is in that format you mentioned in your question then this should work — Danny Buonocore, Sep 18 '19 at 00:20

JSON : Convert Json For Chart CanvasJS

From:

To :

1 Answers1