Gimana nampilin Data Materi Sesuai Kategori, dan konten yang diambil dari database dngn ckeditor?

Ceritanya saya buat aplikasi android mastah, tapi ane ada kendala

Kategori dari database dah nongol

terus pas diklik salah satu dari kategori malah keluar semua materinya

dan pas sampai di kontennya malah kaya gini, ini ambi dari database yang dibuat dari ckeditor, dan sekali lagi apa yang diklik dari materi malah keluar semua gax sesuai dengan judul :(.

ini koding panggilnya saya juga baru belajar tapi ngmpulin beberapa tutorial dapatnya kaya gini

document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady(){
var vm = new Vue({
		el: '#app',
		data:{
		kategori: [],
		materi: []
		},
		methods:{
		 sync:function(){
			 //Panggil Kategori
			$.ajax({
				 dataType: 'json',
				  url: 'http://maknamimpi.esy.es/controller/api/kategori.php',
				  success:function(data){
		 			localStorage.setItem('kategori',JSON.stringify(data));
					 vm.setKategori();
					 alert("Data Kategori Berhasil Diperbarui");
			},
				error:function(){
					alert("Terjadi kesalahan saat sambungan!");
				}
			});
			 //Panggil Materi
			$.ajax({
				 dataType: 'json',
				  url: 'http://maknamimpi.esy.es/controller/api/materi.php',
				  success:function(data){
		 			localStorage.setItem('materi',JSON.stringify(data));
					 vm.setMateri();
					 alert("Data Materi Berhasil Diperbarui");
			},
				error:function(){
					alert("Terjadi kesalahan saat sambungan!");
				}
			});
		 },
			setKategori:function(){
				this.kategori = JSON.parse(localStorage.getItem('kategori'));
				console.log(this.kategori);
			},
			setMateri:function(){
				this.materi = JSON.parse(localStorage.getItem('materi'));
				console.log(this.materi);
			}
		},
		ready:function(){
		this.setKategori();
		this.setMateri();
		}
	})
}

saya buatnya pake intel XDK agan2, mohon bantuannya, dan maaf klo pertanyaannya agak sedkit gx jelas