AngularJS - コントローラのJSONデータにある子オブジェクトにアクセスする

Question

私はlaravelアプリケーションを作成していますが、Angularを使用してビュー内の子オブジェクトのプロパティにアクセスしようとしています。私は私のビュー（子オブジェクトを含む）全体のデータを取得することができますが、角度を使用して表示しようとするときに問題があります。

コントローラ：

public function index(Request $request) 

     $lang = $request->input('lang') ?? 'pt'; 
     $interestTranslations = Interest::with([ 
      'interesttranslations' => function($query) use ($lang) { 
       $query->where('languageCode', $lang); 
      } 
     ])->get()->toArray(); 

     return ['translatedInterests' => $interestTranslations]; 
    } 

}

JSファイル：

app..controller("Interests", function ($scope, $rootScope, HobbiesService) { 
     var lang = $rootScope.lang; 
     HobbiesService.newData(lang).then(function (response) { 
      $rootScope.interests = response["data"].translatedInterests; 
     }); 
    }) 

htmlファイル（interest.interesttranslations作品しかしinterest.interesttranslations.name_or_other_propertyはない）：

<p style="color: white;">{{interests}}</p> <!-- this shows the whole json datam including the child objects--> 

<div class="no-padding owl-carousel" id="hobbies-container" ng-controller="Interests"> 
    <div ng-repeat="interest in interests"> 
     <img src="/img/about/{{ interest.imageName }}" alt="{{ interest.imageName }}" /> <!--this works--> 
     <p style="color: white;">{{ interest.interesttranslations.name }}</p> <!--this doesn't work--> 
    </div> 
</div> 

{{利益}}を使用しているとき、私のビューに表示

JSON：事前に

[{ 
    "id": 1, 
    "applicant_id": 1, 
    "imageName": "friends.png", 
    "created_at": null, 
    "updated_at": null, 
    "interesttranslations": [{ 
     "interest_id": 1, 
     "languageCode": "pt", 
     "name": "explorar com amigos", 
     "created_at": null, 
     "updated_at": null 
    }] 
    }, { 
    "id": 2, 
    "applicant_id": 1, 
    "imageName": "world.png", 
    "created_at": null, 
    "updated_at": null, 
    "interesttranslations": [{ 
     "interest_id": 2, 
     "languageCode": "pt", 
     "name": "viajar", 
     "created_at": null, 
     "updated_at": null 
    }] 
    }, 
    { 
    "id": 3, 
    "applicant_id": 1, 
    "imageName": "tv-shows.png", 
    "created_at": null, 
    "updated_at": null, 
    "interesttranslations": [{ 
     "interest_id": 3, 
     "languageCode": "pt", 
     "name": "séries televisivas", 
     "created_at": null, 
     "updated_at": null 
    }] 
    } 
] 

ありがとう！

Answer 1

プロパティinteresttranslationsはオブジェクトではなく配列です。ビューで

は

{{ interest.interesttranslations[0].name }} 

それともトリックをしたその配列

<p ng-repeat="item in interest.interesttranslations"> 
    {{item.name}} 
</p>