2017-02-07 8 views
-2

をangularjs:私は、ユーザーIDのNGリピートリストを持っている私のページで.MAP機能は、私は以下のように示しているPHPのバックエンドを通じて配列、取得

{ 
    "response":{ 
     "code":"0000", 
     "message":"OK" 
    }, 
    "data":[ 
     { 
     "id":"2", 
     "description":"Description 1", 
     "image":"work\/(1)(1).jpg", 
     "job_id":"5", 
     "final_upload":"N" 
     }, 
     { 
     "id":"4", 
     "description":"Description 2", 
     "image":"work.jpg", 
     "job_id":"5", 
     "final_upload":"Y" 
     } 
    ] 
} 

を、私はマップする必要があります上記で受け取った配列内のjob_id要素にユーザーIDを追加します。そのjob_idに関連するイメージと説明が表示されるようにします。

上記のように、値が「5」の2つのjob_id要素があります。

上記の配列は、workListとして解決されています。

次の関数では、user_idを渡してworkList配列にマップし、そのIDに関連するイメージと説明を取得しようとします。

$scope.viewWork = function(id) { 
       var uid = id; 
       $scope.works = workList.map(item => 
        ({ 
         image: workList.find(work => work.job_id === uid).image, 
         description: workList.find(work => work.job_id === uid).description, 
        })); 
      } 

細かいIDの柱、そして私は結果を表示するNGリピート要素を持っている...

<tr ng-repeat="works in works"> 

<td>{{ works.image }}</td> 
<td>{{ works.description }}</td> 

</tr> 

しかし、私は何を受け取ることは、常に唯一の最初にマッチした要素です。 2番目の結果は最初の結果と重複しています。しかし、私は2つの結果を受け取っていますが、それは必要なものですが、問題は両方とも同じであり、実際の2番目の結果は表示されません。

イメージと説明値の両方を取得しようとしていますjob_id == 5ですが、最初に一致する要素が2回だけ返されます....

ありがとうございました。

+1

マップ関数の前でフィルタリングを試してみてください...違いがあるかどうかはわかりませんが、それは間違いなく最適化されています。 'worklist.filter((el)=> el.job_id === uid).map((item)=> ...)' – daniel0mullins

答えて

3

mapの場合、最初の結果と一致するfindのjob_idを検索しているため、元の配列に2つの要素があるため、同じ結果(最初のもの)を結果の配列に2回プッシュします。

下記のコードをご覧ください。それはいくつかの光を発するかもしれません。

var workList = [ 
 
     { 
 
     "id":"2", 
 
     "description":"Description 1", 
 
     "image":"work\/(1)(1).jpg", 
 
     "job_id":"5", 
 
     "final_upload":"N" 
 
     }, 
 
     { 
 
     "id":"4", 
 
     "description":"Description 2", 
 
     "image":"work.jpg", 
 
     "job_id":"5", 
 
     "final_upload":"Y" 
 
     } 
 
    ]; 
 

 
var viewWork = function(id) { 
 
    var uid = id; 
 
    return workList.map(item => (item.job_id == id ? { 
 
    image: item.image, 
 
    description: item.description, 
 
    } : null)); 
 
} 
 

 
console.log(viewWork(5))

0

あなたは二回アイテムを探しています。 (完全なリストで検索し、再びたび)map内部

  1. map
  2. find

あなたは単にfilterすることができます - >map出力は、あなたが探しているものと一致し、それを返すために適切な形式。または、@ JorgeObregonのような条件付きでワンパスマップを実行することができます。

$scope.works = workList 
    .filter(item => item.job_id === id) 
    .map(item => { image: item.image, description: item.description }); 
関連する問題