在填充角度和JSON正确的数据 [英] Populating correct data in Angular and JSON
问题描述
我创建将用于只显示一个就一个字preSS微型网站设置每页标识的角模板 - 多页，每页一个标志，其变化。该data.json信息主要是变化的网址。我的难题是怎么写的，将正确填充相关数据的JavaScript。我想，也许比较页面标题的logo_name（从JSON文件）是一个很好的条件来设置一个for循环，但我不知道怎么写JS的休息，也是不知道在哪里的controller.js放置code。下面是不适合某些原因正确链接小提琴，js的显示想法我打算去，但显然是行不通的：的 https://jsfiddle.net/roob/qpzt5akp/2/
这里是控制器：
VAR brandApp = angular.module（'brandApp'，[]）; brandApp.controller（'brandingContr'，['$范围，$ HTTP'，函数（$范围，$ HTTP）{
$ http.get（'./ JS / data.json'）。成功（功能（数据）{
$ scope.logos =数据; VAR数据= JSON.parse（数据）;
VAR徽标名称= data.logo_name [I] VAR pgTtl = document.querySelector（标题）的innerHTML。
VAR DATALENGTH = data.length; 对于（VAR I = 0; I＆LT;数据长度;我+ +）
{
如果（徽标名称=== pgTtl）
{
$（＃wrappr）附加（）;
}
}
}）;
}]）;
下面是JSON数据。任何及所有帮助将是AP preciated。
[{logo_name：洛杉矶时报核心标志，
资产：{display_logo：http://events.latimes.com/lat-branding/files/2015/08/2015-latlogo-300x37.png
blk_jpg：http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo.jpg，
blk_png：http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo.png，
blk_eps：http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo.eps，
wht_png：http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo_White.png，
wht_eps：http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo_White.eps}
}，
{logo_name：洛杉矶时报传媒集团徽标，
资产：{display_logo： \"http://events.latimes.com/lat-branding/wp-content/themes/lat-branding/img/15_LAT_MediaGroup_Logo.jpg\",
blk_jpg：http://events.latimes.com/lat-branding/files/2015/08/15_LAT_MediaGroup_Logo1.jpg，
blk_png：http://events.latimes.com/lat-branding/files/2015/08/15-LAT-Media-Group-Logo1.png，
blk_eps：http://events.latimes.com/lat-branding/files/2015/08/15_LAT_MediaGroup_Logo1.eps，
wht_png：http://events.latimes.com/lat-branding/files/2015/08/15-LAT-Media-Group-Logo-W1.png，
wht_eps：http://events.latimes.com/lat-branding/files/2015/08/15_LAT_MediaGroup_Logo_W1.eps}
}]
下面是与code，你需要更新的提琴：
http://jsfiddle.net/qpzt5akp/6/
有一些code在那里，使其与工作的jsfiddle，但它应该是显而易见的。主要的事情：不要使用NG-重复。没必要在这里。
这是你的控制器：
angular.module（'brandApp'，[]）
.controller（'brandingContr'，['$范围，$ HTTP'，函数（$范围，$ HTTP）{
$ http.get（'./ JS / data.json'），然后（功能（数据）{
变种标志= JSON.parse（数据）;
VAR pgTtl = window.title; //或document.querySelector（标题）的innerHTML。
VAR matchingLogos = logos.filter（功能（它，九，编曲）{
返回it.logo_name === pgTtl;
}）;
如果（matchingLogos＆放大器;＆放大器; matchingLogos.length大于0）{
$ scope.logo = matchingLogos [0];
}其他{
//处理情况下没有发现这里的标志。
//也许一个默认的标志，这将继续承诺
//这里抛出一个错误，会拒绝当前的承诺。
}
返回$ scope.logo; //继续承诺
}）;
}]）;
I am creating an angular template that will be used to show only one set of logos per page on a wordpress micro site - multiple pages, one logo per page with its variations. The data.json info is mostly url's of the variations. My conundrum is how to write the javascript that will correctly populate the relevant data. I thought maybe compare the page title to the logo_name (from json file) is a good condition to set a for-loop, but I'm not sure how to write the rest of the js, also not sure where in the controller.js to place the code. Here is a fiddle that does not link properly for some reason, the js shows the idea I am going for but obviously does not work: https://jsfiddle.net/roob/qpzt5akp/2/ Here is the controller:
var brandApp = angular.module('brandApp', []);
brandApp.controller('brandingContr', ['$scope', '$http', function($scope, $http) {
$http.get('./js/data.json').success(function(data) {
$scope.logos = data;
var data=JSON.parse(data);
var logoName = data.logo_name[i];
var pgTtl=document.querySelector('title').innerHTML;
var dataLength = data.length;
for (var i=0; i<dataLength; i++)
{
if (logoName === pgTtl)
{
$("#wrappr").append();
}
}
});
}]);
Below is the JSON data. Any and all help would be appreciated.
[{ "logo_name" : "LA Times Core Logo",
"assets": {"display_logo" : "http://events.latimes.com/lat-branding/files/2015/08/2015-latlogo-300x37.png",
"blk_jpg" : "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo.jpg",
"blk_png": "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo.png",
"blk_eps" : "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo.eps",
"wht_png" : "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo_White.png",
"wht_eps" : "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo_White.eps"}
},
{ "logo_name" : "LA Times Media Group Logo",
"assets": {"display_logo" : "http://events.latimes.com/lat-branding/wp-content/themes/lat-branding/img/15_LAT_MediaGroup_Logo.jpg",
"blk_jpg" : "http://events.latimes.com/lat-branding/files/2015/08/15_LAT_MediaGroup_Logo1.jpg",
"blk_png": "http://events.latimes.com/lat-branding/files/2015/08/15-LAT-Media-Group-Logo1.png",
"blk_eps" : "http://events.latimes.com/lat-branding/files/2015/08/15_LAT_MediaGroup_Logo1.eps",
"wht_png" : "http://events.latimes.com/lat-branding/files/2015/08/15-LAT-Media-Group-Logo-W1.png",
"wht_eps" : "http://events.latimes.com/lat-branding/files/2015/08/15_LAT_MediaGroup_Logo_W1.eps"}
}]
Here is an updated fiddle with the code you need:
http://jsfiddle.net/qpzt5akp/6/
There's some code in there to make it work with jsfiddle, but it should be obvious. Main thing: Don't use ng-repeat. No need here.
Here's your controller:
angular.module('brandApp', [])
.controller('brandingContr', ['$scope', '$http', function($scope, $http) {
$http.get('./js/data.json').then(function(data) {
var logos = JSON.parse(data);
var pgTtl = window.title; // or document.querySelector('title').innerHTML;
var matchingLogos = logos.filter(function(it,ix,arr) {
return it.logo_name === pgTtl;
});
if(matchingLogos && matchingLogos.length > 0) {
$scope.logo = matchingLogos[0];
} else {
//handle case for no logo found here.
//Maybe a default logo, this would continue Promise
//Throwing an error here would reject the current Promise.
}
return $scope.logo; //Continue Promise
});
}]);
这篇关于在填充角度和JSON正确的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
