Populate Dropdown List

Hello Mastah,

Where is wrong with below code? I can get the JSON result directly through any browser, it just don’t want to show up in the dropdown list

I am just trying to populate from mysql database to combobox in ionic framework.

addlist.html

<ion-header-bar align-title="center" class="bar-stable">
  <h1 class="title">Add Lists</h1>
</ion-header-bar>
<ion-view>
  <div class="list has-header padding">
    <label class="item item-input item-select">
      <div class="input-label">
        Category
      </div>
      <div ng-controller="AddListCategoryCtrl">
        <select ng-model="category" ng-options="x.category for x in data">
          <option ng-repeat="x in data" value="{{x.id}}">{{x.category}}</option>
        </select>
      </div>
    </label>
  </div>
</ion-view>

controllers.js

angular.module('ionicApp.controllers', [])

.controller('AddListCategoryCtrl', function($scope, $http) {
    var xhr = $http({
      method: 'post',
      url: 'http://www.mywebsite.com/api/listCat.php'
    });
    xhr.success(function(data){
     $scope.data = data.data;
    });
});

listCat.php

<?php
include 'db.php';
getById();

function getById() {
     $sql = "SELECT id,category FROM tbl_category ORDER BY tbl_category.id";
    try {
        $db = getDB();
        $stmt = $db->prepare($sql);
        $stmt->execute();
        $category = $stmt->fetchAll(PDO::FETCH_OBJ);
        $db = null;
        echo '{"category": ' . json_encode($category) . '}';

    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
 }
?>

Hi

I didn’t really look into your code yet, but check if the JSON is correctly formed.
in your controllers.js try:
xhr.success(function(data){ console.log("my incoming JSON: "+JSON.stringify(data)); $scope.data = data.data; });
And see in your log what value is coming in.
Check if it is JSON formatted.

Hi whizzkey,

Added console.log to the code and it show in log
my incoming JSON: {"category":[{"id":"1","category":"RUMAH"},{"id":"2","category":"MOBIL"}]}
believed that it is correct format.

This is your JSON in a nicer way presented and yes, it is valid.
{ "category":[ { "id":"1", "category":"RUMAH" }, { "id":"2", "category":"MOBIL" } ] }

Try:
xhr.success(function(data){ $scope.data = data.data.category; });

You have your category object inside the main data.data object

@Ckpk
you don’t need to use ng-repeat as you are already using ng-options

< div ng-controller=“AddListCategoryCtrl” >
< select ng-model=“category” ng-options=“x.category for x in data”>
< /select>
< /div>

1 Like

@whizzkey
Try add object category and get this error in console Cannot read property 'category' of undefined

@nitishrajput01
Take out ng-repeat still same.

1 Like

@nitishrajput01 has a good point. I didn’t see that one.

@whizzkey

Nothing change when takes out ng-repeat. it still empty in the combobox.

change your $scope.data = data.data to
$scope.data = data.category;

console.log($scope.data); // are you getting data here after adding the above than dropdown should be populate

@nitishrajput01
that’s what I thought as well. I was just about to ask if the log was on data and not data.data
That’s 2 bugs down likely

@nitishrajput01 and @whizzkey

Yay, it is working now.

May i know why, is it i am doing wrong?

@Ckpk
yes, category is an object and you have to defined the loop inside the object that’s where you are getting wrong data

you mean as i have set category in the ng-model ?

@Ckpk

No i mean in your json format category object holds all data
if you are using loop to populate all data than ng-options should run inside the category object

@nitishrajput01
nice, thank you so much for the guidance, thank you