JavaScript►AngularJS

select 도시별 매장정보 출력

나는, 잘 잃어버리고, 잘 잊어먹는다.
그래서 나중에 혹시 또 쓸일이 있을까봐 남겨둔다.

겨울을 넘어 봄 바람이 올락말락 하는데에,
진행하고 있는 프로젝트에서, 매장정보를 가져올일이 생겼다.
이미 본사에서 사용하고 있는 매장정보 API를 주면, ajax 를 통해 가져오면 되겠지 하고 망연히 있었다.

그런데, 매장정보를 가져오는 부분이 기획서에 없어(out)! 졌더라.
없어졌으니까, “아, 없어졌구나.”라고 중얼 거린후, 다른거 하면서 망연히 있었다.

그렇게 시간은 흐르다가, 갑자기 매장정보를 가져오는게 기획서에 딱!하고 업데이트되어 있었다.

  • 덧붙혀 API를 줄 수 없다! 고 하였다.
  • 그럼 어떻게 해요!? 엑셀문서로! 받았다.

아.. 어떻게 하지?

일단 받은 엑셀 문서를 살펴보았는데,
무지막지하게 많지는 않았지만(음 그래도 음. 음. 음. 음.)..
암튼, 이걸 어떻게 하지?

지역별로 나눠서 어케 해보자 하고 .json형식으로 변환을 했다.

json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
[
  {
    city: "콩순이시",
    items: [
      {
        code: "kong01",
        name: "콩순이 1호점"
      },
      {
        code: "kong02",
        name: "콩순이 2호점"
      },
    ]
  },
  {
    city: "빈이시",
    items: [
      {
        code: "bin01",
        name: "원빈"
      },
      {
        code: "bin02",
        name: "현빈"
      },
      {
        code: "bin03",
        name: "조빈"
      },
    ]
  },
  {
    city: "또봇시",
    items: [
      {
        code: "tobot01",
        name: "또봇 1호점"
      },
      {
        code: "tobot02",
        name: "또봇 2호점"
      },
    ]
  },
  {
    city: "카봇시",
    items: [
      {
        code: "cabot01",
        name: "카봇 1호점"
      },
      {
        code: "cabot02",
        name: "카봇 2호점"
      },
      {
        code: "cabot03",
        name: "카봇 3호점"
      },
      {
        code: "cabot04",
        name: "카봇 4호점"
      },
    ]
  },
];

stores

그리고, 만든 json형식의 아이를 $scope.stores안에 data 를 만들고 할당해줬다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
$scope.stores = {

  // 시도 모델
  sidoModel: null,

  // 매장 모델
  store: {
    code: null,  // 매장 코드
    name: null   // 매장 이름
  },

  // 매장(items) 데이터
  sdata: [],

  // 지역 및 매장 정보
  data: storeData,

  // 지역 변경
  change: function(){

    var local;

    $scope.stores.sdata = [];

    if( $scope.stores.data[$scope.stores.sidoModel] !== undefined ) {

      $scope.stores.sdata = $scope.stores.data[$scope.stores.sidoModel].items;
      local = $scope.stores.data[ $scope.stores.sidoModel ].city;

    }

  },

  // 매장명 가져오기
  getName: function( store ){

    var storeCode = $scope.stores.store.code,
        storeName = $.grep( $scope.stores.sdata, function( store ) {
          return store.code === storeCode;
        });

    if( storeName.length > 0 ) {
       storeName = storeName[0].name;
    }

    $scope.stores.store.name = storeName;

  }

};

결과 미리보기