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

Question

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

我的代码:

此处更新了 View :

<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>

原始 View :

<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>

我的 Controller :

'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"
        }
    ]
};

如您所见，我使用“item in items”引用 ng-repeat 并构造 http.get 以通过该方式获取对象。请问有什么想法吗？

Answer 1

请检查您的 JSON。认为 JSON 无效。

BatmanReality.json

{"batman" : {
"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"
}}}

supermanReality.json

{"superman" : {
"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"
    }
]}}

和

html:

<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.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>