2017-04-21 5 views
0

私は確かに単純な解決策がありますが、見つけられないという問題があります。私は3つの別々の配列を持つJSONファイルを持っています。ウェブサイト1、ウェブサイト2、ウェブサイト3。私はapp.controller経由でこれを取得しており、ng-repeatを使用して3つの選択リストにオプションを生成する必要があります。 3つのapp.controllerインスタンスを作成するのではなく、3つの配列を持つフォームレベルで1つを作成し、ng-repeatを3回使用して関連する値を取得するのは意味がありましたが、 ng-repeatを使用して値を取得します。JSONファイルで2つの別々の配列にng-repeat Angular JS

[ 
    { 
"Websites1": [ 
    { 
    "0": "1", 
    "ID": "1", 
    "1": "Value 1", 
    "WebsiteName": "Value 1", 
    "2": "EI", 
    "WebsiteCode": "EI" 
    }, 
    { 
    "0": "2", 
    "ID": "2", 
    "1": "Value 2", 
    "WebsiteName": "Value 2", 
    "2": "IC", 
    "WebsiteCode": "IC" 
    }, 
    { 
    "0": "3", 
    "ID": "3", 
    "1": "Value 3", 
    "WebsiteName": "Value 3", 
    "2": "SO", 
    "WebsiteCode": "SO" 
    } 
] 
}, 
{ 
"Websites2": [ 
    { 
    "0": "1", 
    "ID": "1", 
    "1": "Value 1a", 
    "WebsiteName": "Value 1a", 
    "2": "EI", 
    "WebsiteCode": "EI" 
    }, 
    { 
    "0": "2", 
    "ID": "2", 
    "1": "Value 2a", 
    "WebsiteName": "Value 2a", 
    "2": "IC", 
    "WebsiteCode": "IC" 
    }, 
    { 
    "0": "3", 
    "ID": "3", 
    "1": "Value 3a", 
    "WebsiteName": "Value 3a", 
    "2": "SO", 
    "WebsiteCode": "SO" 
    } 
] 
}, 
{ 
"Websites3": [ 
    { 
    "0": "1", 
    "ID": "1", 
    "1": "Value 1a", 
    "WebsiteName": "Value 1a", 
    "2": "EI", 
    "WebsiteCode": "EI" 
}, 
    { 
    "0": "2", 
    "ID": "2", 
    "1": "Value 2a", 
    "WebsiteName": "Value 2a", 
    "2": "IC", 
    "WebsiteCode": "IC" 
    }, 
    { 
    "0": "3", 
    "ID": "3", 
    "1": "Value 3a", 
    "WebsiteName": "Value 3a", 
    "2": "SO", 
    "WebsiteCode": "SO" 
    } 
] 
} 
] 

とコントローラ:

app.controller('FormController', [ '$http', function($http) { 

var form = this; 
form.json = []; 

var config = { 
    params: { 
     command: 'banner.json.form.website', 
     ajax: 'true' 
    } 
}  

$http.get('https://api.myjson.com/bins/o9r47', config).success(function(data) { 

    console.log(data); 
    form.json = data; 

}).error(function(data) { 

    console.log('error'); 

}); 
}]); 

すべてが良いとJSONが正しく返されているが、次のように私が持っているJSONです。私は唯一のトップレベルのデータをJSONオブジェクトを使用する場合は、この作品

<div ng-controller="FormController as form" class="portlet-body form"> 
<select class="form-control select2"> 
<option ng-repeat="json in form.json.Websites" value="{{json.WebsiteCode}}">{{json.WebsiteName}}</option> 
</select> 
</div> 

:ここではNGリピートです

<div ng-controller="FormController as form" class="portlet-body form"> 
<select class="form-control select2"> 
<option ng-repeat="json in form.json" value="{{json.WebsiteCode}}">{{json.WebsiteName}}</option> 
</select> 
</div> 

しかし、私は、配列からデータを取得する方法を見つけ出すことはできませんJSONオブジェクト内で誰か助けてもらえますか?

ありがとうございます!

+0

'あなたの例の周りのブラケットがないあなたは、単一の配列要素にラップあなたのデータを受信して​​いることを確認するので、' [ '&']してください間違い。 – Seprum

答えて

1

のために動作します。この希望をお試しください。

2番目のレイヤーはobjectです。$indexsite['Websites' + ($index + 1)]に基づいてデータを読み取るのがここです。

は、以下のコードを参照してください。

angular.module("app", []) 
 
    .controller('FormController', ['$http', function($scope) { 
 
    var form = this; 
 

 
    form.json = [{ 
 
     "Websites1": [{ 
 
      "0": "1", 
 
      "ID": "1", 
 
      "1": "Value 1", 
 
      "WebsiteName": "Value 1", 
 
      "2": "EI", 
 
      "WebsiteCode": "EI" 
 
      }, 
 
      { 
 
      "0": "2", 
 
      "ID": "2", 
 
      "1": "Value 2", 
 
      "WebsiteName": "Value 2", 
 
      "2": "IC", 
 
      "WebsiteCode": "IC" 
 
      }, 
 
      { 
 
      "0": "3", 
 
      "ID": "3", 
 
      "1": "Value 3", 
 
      "WebsiteName": "Value 3", 
 
      "2": "SO", 
 
      "WebsiteCode": "SO" 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "Websites2": [{ 
 
      "0": "1", 
 
      "ID": "1", 
 
      "1": "Value 1a", 
 
      "WebsiteName": "Value 1a", 
 
      "2": "EI", 
 
      "WebsiteCode": "EI" 
 
      }, 
 
      { 
 
      "0": "2", 
 
      "ID": "2", 
 
      "1": "Value 2a", 
 
      "WebsiteName": "Value 2a", 
 
      "2": "IC", 
 
      "WebsiteCode": "IC" 
 
      }, 
 
      { 
 
      "0": "3", 
 
      "ID": "3", 
 
      "1": "Value 3a", 
 
      "WebsiteName": "Value 3a", 
 
      "2": "SO", 
 
      "WebsiteCode": "SO" 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "Websites3": [{ 
 
      "0": "1", 
 
      "ID": "1", 
 
      "1": "Value 1a", 
 
      "WebsiteName": "Value 1a", 
 
      "2": "EI", 
 
      "WebsiteCode": "EI" 
 
      }, 
 
      { 
 
      "0": "2", 
 
      "ID": "2", 
 
      "1": "Value 2a", 
 
      "WebsiteName": "Value 2a", 
 
      "2": "IC", 
 
      "WebsiteCode": "IC" 
 
      }, 
 
      { 
 
      "0": "3", 
 
      "ID": "3", 
 
      "1": "Value 3a", 
 
      "WebsiteName": "Value 3a", 
 
      "2": "SO", 
 
      "WebsiteCode": "SO" 
 
      } 
 
     ] 
 
     } 
 
    ]; 
 

 

 
    }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="FormController as form" class="portlet-body form"> 
 

 
    <select class="form-control select2" ng-repeat="site in form.json"> 
 
    <option ng-repeat="item in site['Websites' + ($index + 1)]" value="{{item.WebsiteName}}">{{item.WebsiteName}}</option> 
 
    </select> 
 
</div>

+0

ありがとうございます。完璧に動作します。 – pjordanna

0

は、それはあなたが表示する配列を入れ子にしておりますので、ネストされたng-repeatと試みることができるあなた

<html> 
 
<head> 
 
\t <script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
 

 
\t <script> 
 
\t \t var app=angular.module("myapp", []); 
 
\t \t app.controller("namesctrl", function($scope){ 
 
\t \t \t $scope.myArray = [ 
 
\t \t \t { 
 
\t \t \t \t "Websites1": [ 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "1", 
 
\t \t \t \t \t "ID": "1", 
 
\t \t \t \t \t "1": "Value 1", 
 
\t \t \t \t \t "WebsiteName": "Value 1", 
 
\t \t \t \t \t "2": "EI", 
 
\t \t \t \t \t "WebsiteCode": "EI" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "2", 
 
\t \t \t \t \t "ID": "2", 
 
\t \t \t \t \t "1": "Value 2", 
 
\t \t \t \t \t "WebsiteName": "Value 2", 
 
\t \t \t \t \t "2": "IC", 
 
\t \t \t \t \t "WebsiteCode": "IC" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "3", 
 
\t \t \t \t \t "ID": "3", 
 
\t \t \t \t \t "1": "Value 3", 
 
\t \t \t \t \t "WebsiteName": "Value 3", 
 
\t \t \t \t \t "2": "SO", 
 
\t \t \t \t \t "WebsiteCode": "SO" 
 
\t \t \t \t } 
 
\t \t \t \t ] 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t "Websites2": [ 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "1", 
 
\t \t \t \t \t "ID": "1", 
 
\t \t \t \t \t "1": "Value 1a", 
 
\t \t \t \t \t "WebsiteName": "Value 1a", 
 
\t \t \t \t \t "2": "EI", 
 
\t \t \t \t \t "WebsiteCode": "EI" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "2", 
 
\t \t \t \t \t "ID": "2", 
 
\t \t \t \t \t "1": "Value 2a", 
 
\t \t \t \t \t "WebsiteName": "Value 2a", 
 
\t \t \t \t \t "2": "IC", 
 
\t \t \t \t \t "WebsiteCode": "IC" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "3", 
 
\t \t \t \t \t "ID": "3", 
 
\t \t \t \t \t "1": "Value 3a", 
 
\t \t \t \t \t "WebsiteName": "Value 3a", 
 
\t \t \t \t \t "2": "SO", 
 
\t \t \t \t \t "WebsiteCode": "SO" 
 
\t \t \t \t } 
 
\t \t \t \t ] 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t "Websites3": [ 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "1", 
 
\t \t \t \t \t "ID": "1", 
 
\t \t \t \t \t "1": "Value 1a", 
 
\t \t \t \t \t "WebsiteName": "Value 1a", 
 
\t \t \t \t \t "2": "EI", 
 
\t \t \t \t \t "WebsiteCode": "EI" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "2", 
 
\t \t \t \t \t "ID": "2", 
 
\t \t \t \t \t "1": "Value 2a", 
 
\t \t \t \t \t "WebsiteName": "Value 2a", 
 
\t \t \t \t \t "2": "IC", 
 
\t \t \t \t \t "WebsiteCode": "IC" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "3", 
 
\t \t \t \t \t "ID": "3", 
 
\t \t \t \t \t "1": "Value 3a", 
 
\t \t \t \t \t "WebsiteName": "Value 3a", 
 
\t \t \t \t \t "2": "SO", 
 
\t \t \t \t \t "WebsiteCode": "SO" 
 
\t \t \t \t } 
 
\t \t \t \t ] 
 
\t \t \t } 
 
\t \t \t ]; 
 

 
\t \t \t $scope.getArrayData = function(data){ 
 
\t \t \t \t if (data.Websites1) { 
 
\t \t \t \t \t return data.Websites1 
 
\t \t \t \t } 
 
\t \t \t \t if (data.Websites2) { 
 
\t \t \t \t \t return data.Websites2 
 
\t \t \t \t } 
 
\t \t \t \t if (data.Websites3) { 
 
\t \t \t \t \t return data.Websites3; 
 
\t \t \t \t } 
 

 
\t \t \t } 
 

 
\t \t }); 
 

 
\t \t 
 
\t </script> 
 
</head> 
 
<body ng-app="myapp" ng-controller="namesctrl"> 
 
\t <div ng-repeat="json in myArray"> 
 
\t \t 
 
\t \t <select class="form-control select2"> 
 
\t \t \t <option ng-repeat="json1 in getArrayData(json)" value="{{json.ID}}">{{json1.WebsiteName}}</option> 
 
\t \t </select> 
 
\t </div> 
 

 
</body> 
 
</html>

関連する問題