使用ng-repeat从2个不同的JSON文件中提取数据

Question

我没有收到错误，但无法获取我的数据。我的结构很简单，一个文件夹中的json文件，另一个文件夹中的视图，另一个文件夹中的脚本/控制器。只需使用控制器即可完成工作，因为它是一个简单的小部件。关于可能导致此失败的任何想法，因为我没有收到错误，我相信我的映射是正确的。

我的代码：

此处更新了视图：

<div class="col-md-5 propDtl" style="padding: 10px; display: block;" ng-repeat="item in items">
    <div class="listImg" style="float: left;">
      <img src="http://placehold.it/200x200" style="display: block;">
    </div>
    <div class="propTxt" style="margin-left: 220px; padding: 10px 0px 10px 0px;">
      <p style="font-size: 22px; color: blue;">{{ item.address }}</p>
      <p style="font-size: 22px; color: blue;">{{ item.address }}</p>
      <p  style="font-size: 26px; color: black;">{{ item.cost }}</p>
      <ul>
        <li>{{ item.beds }}</li>
        <li>{{ item.baths }}</li>
        <li>{{ item.sq_ft }}</li>
      </ul>
    </div>
</div>

原始观点：

<div class="container" ng-controller="MainCtrl">
  <h2>Awesome Listings Widget</h2>  
  <div class="listingsFilter">
    <a href="" class="btn btn-md btn-primary">Price</a>
    <a href="" class="btn btn-md btn-warning">Beds</a>
    <a href="" class="btn btn-md btn-success">Sq. ft.</a>
  </div>
  <div class="properties col-md-12" style="margin-top: 10px;">
      <div class="col-md-5 propDtl" style="padding: 10px; display: block;" ng-repeat="item in items">
        <div class="listImg" style="float: left;">
          <img src="http://placehold.it/200x200" style="display: block;">
        </div>
        <div class="propTxt" style="margin-left: 220px; padding: 10px 0px 10px 0px;">
          <p style="font-size: 22px; color: blue;">{{ item.value.address }}</p>
          <p style="font-size: 22px; color: blue;">{{ item.value.address }}</p>
          <p  style="font-size: 26px; color: black;">{{ item.value.cost }}</p>
          <ul>
            <li>{{ item.value.beds }}</li>
            <li>{{ item.value.baths }}</li>
            <li>{{ item.value.sq_ft }}</li>
          </ul>
        </div>
      </div>
  </div>
</div>

我的控制员：

'use strict';
angular.module('zillowTestApp')
  .controller('MainCtrl', ['$scope', '$http', '$filter',    
  function ($scope, $http, $filter) {

    $scope.items = [];

    $http.get('#/batmanReality.json').then(function(response){
    angular.forEach(response.data.__BATMAN_DATA__, function(value,key){
      $scope.items.push({ 
          address: key, 
          cost: value.cost,
          beds: value.beds,
          baths: value.baths,
          sq_ft: value.sq_ft
      });
    })
    });

    $http.get('#/supermanReality.json').then(function(response){
    angular.forEach(response.data.__SUPERMAN_DATA__, function(value,key){
      $scope.items.push({ 
          address: value.address, 
          price: value.cost,
          beds: value.beds,
          baths: value.baths,
          sq_ft: value.sq_ft
      });
    })
    });
}]);

带有对象和属性的2个JSON文件。

window.__BATMAN_DATA__ = {
    "1806 E. Wayne Lane, Fort Dodge, IA 50501": {
        "cost": "849,950",
        "beds": "5",
        "baths": "3",
        "sq_ft": "4050",
        "img": "http://stevensegallery.com/200/200",
        "url": "http://trulia.com"
    },
    "1774 Kapow Drive, Hyattsville, MD 20782": {
        "cost": "419,950",
        "beds": "3",
        "baths": "2",
        "sq_ft": "1700",
        "img": "http://stevensegallery.com/200/200",
        "url": "http://trulia.com"
    },
    "773 Duhnuhnuhna Street, Essex, MD 21221": {
        "cost": "524,999",
        "beds": "3",
        "baths": "2",
        "sq_ft": "1980",
        "img": "http://stevensegallery.com/200/200",
        "url": "http://trulia.com"
    },
    "178 Pennyworth Avenue, Depew, NY 14043": {
        "cost": "619,999",
        "beds": "4",
        "baths": "1.5",
        "sq_ft": "2100",
        "img": "http://stevensegallery.com/200/200",
        "url": "http://trulia.com"
    }
};

和

window.__SUPERMAN_DATA__ = {
    "items": [
        {
            "address": "7791 Luther Way, Knoxville, TN 37918",
            "price": "549999",
            "beds": "3",
            "baths": "2.5",
            "sqft": "3000",
            "built": "1976",
            "thumb": "http://fillmurray.com/150/150",
            "url": "http://zillow.com"
        },
        {
            "address": "1774 Kapow Drive, Hyattsville, MD 20782",
            "price": "419950",
            "beds": "3",
            "baths": "2",
            "sqft": "1700",
            "built": "2001",
            "thumb": "http://stevensegallery.com/200/200",
            "url": "http://zillow.com"
        },
        {
            "address": "3121 5th Street, Gotham, NY 27520",
            "price": "280000",
            "beds": "2",
            "baths": "1",
            "sqft": "",
            "built": "1948",
            "thumb": "http://fillmurray.com/150/150",
            "url": "http://zillow.com"
        },
        {
            "address": "178 Pennyworth Avenue, Depew, NY 14043",
            "price": "619999",
            "beds": "4",
            "baths": "1.5",
            "sqft": "2100",
            "built": "2014",
            "thumb": "http://stevensegallery.com/200/200",
            "url": "http://zillow.com"
        }
    ]
};

正如您所看到的，我在项目＆＃34;中引用了ng-repeat和＆＃34;项目。并构建了http.get来抓取对象的方式。想法好吗？