使用ng-repeat从2个不同的JSON文件中提取数据 [英] Using ng-repeat to pull data from 2 different JSON files

查看：75
本文介绍了使用ng-repeat从2个不同的JSON文件中提取数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我没有收到错误，但无法获取我的数据进行呈现。我的结构很简单，就是一个文件夹中的json文件，另一个文件夹中的视图，另一个中的脚本/控制器。简单地使用控制器来完成工作，因为它是一个简单的小工具。任何想法可能导致这失败，因为我没有得到错误，我相信我的映射是正确的。



我的代码：



更新视图在这里： 

 < div class =col-md-5 propDtlstyle =padding：10px; display：block; ng-repeat =项目中的项目> 
< div class =listImgstyle =float：left;> 
< img src =http://placehold.it/200x200style =display：block;> 
< / div> 
< div class =propTxtstyle =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 =containerng-controller =MainCtrl> 
< h2> Awesome Listings小部件< / h2> 
< div class =listingsFilter> 
< a href =class =btn btn-md btn-primary> Price< / a> 
< a href =class =btn btn-md btn-warning>床< / a> 
< a href =class =btn btn-md btn-success> Sq。英尺< / A> 
< / div> 
< div class =properties col-md-12style =margin-top：10px;> 
< div class =col-md-5 propDtlstyle =padding：10px; display：block; ng-repeat =项目中的项目> 
< div class =listImgstyle =float：left;> 
< img src =http://placehold.it/200x200style =display：block;> 
< / div> 
< div class =propTxtstyle =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 
}）; 
}）
}）; 
 $ b $ http.get（'＃/ supermanReality.json'）。then（function（response）{
 angular.forEach（response.data .__ SUPERMAN_DATA__，function（value，key）{ 
 $ scope.items.push（{
地址：value.address，
价格：value.cost，
 beds：value.beds，
 baths：value。浴，
 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：{
费用：419,950，
床位：3，
洗澡：2，
sq_ft：1700，
 img：http://stevensegallery.com/200/200，
url：http://trulia.com
}，
773 Duhnuhnhhna街，艾塞克斯，MD 21221：{
cost：524,999，
beds：3，
baths：2，
sq_ft： 1980，
img：http://stevensegallery.com/200/200，
url：http://trulia.com
}，
178 Penn 
费用：619,999，
床位：4，
洗澡：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
}，
 $ baddress：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
}，
 {
地址：3120 5th Street，Gotham，NY 27520 ，
价格：280000，
床位：2 ，
baths：1，
sqft：，
built：1948，
thumb：http：// fillmurray.com/150/150，
url：http://zillow.com
}，
 {
地址：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
} 
] 
};

正如您所看到的，我将ng-repeat与item in item一起引用并构造了http。用这个对象来抓住这种方式。请注意？

请检查您的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：{
费用：419,950，
床：3，
baths：2，
sq_ft：1700，
img：http://stevensegallery.com/200/ 
url：http://trulia.com
}，
773 Duhnuhnuhna Street，Essex，MD 21221：{
费用： 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
}}} 
  code>

supermanReality.json 

  {超人：{
物品：[
 {
地址：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
}，
 {
地址：3120 5th Street，Gotham，NY 27520，
价格：280000，
床位：2 ，
baths：1，
sqft：，
built：1948，
thumb：http：// fillmurray.com/150/150，
url：http://zillow.com
}，
 {
地址：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 propDtlstyle =padding：10px; display：block; ng-repeat =项目中的项目> 
< div class =listImgstyle =float：left;> 
< img src =http://placehold.it/200x200style =display：block;> 
< / div> 
< div class =propTxtstyle =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>


I am not getting an errors, but cannot get my data to render. My structure is simple in that json files in one folder, views in another, scripts/controllers in another. Simply using the controller to do the work since it is a straight forward widget. Any ideas on what may be causing this to fail as I am not getting errors and I believe my mapping is correct.

My code:

updated view here:

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

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

my 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
      });
    })
    });
}]);

And the 2 JSON files with their objects and properties.

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

and:

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

As you can see, I reference ng-repeat with "item in items" and structured the http.get to grab that way with the object. Ideas please?

解决方案

Please check your JSON. Think so JSON is not valid.

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

and

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>

这篇关于使用ng-repeat从2个不同的JSON文件中提取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆