I am using Angularjs in one of my programme. I am using it to add items to a json array. Then I save this array to a temporary file. Programme is working fine upto this time. When I try to bind saved json string to table I get error Error: [ngRepeat:dupes] Upon searching documentation I found that AngularJS allows duplicate values by syntax "Track by $index" and example is shown to repeat single dimension json. My question is, how can I control my repeater with id
HTML Code
<table>
<thead>
<tr>
<th style="width: 5%; text-align: left;">
Edit
</th>
<th style="width: 5%; text-align: left;">
Dr./Cr.
</th>
<th style="width: 25%; text-align: left;">
G.L. Head
</th>
<th style="width: 25%; text-align: left;">
S.L. Head
</th>
<th style="width: 25%; text-align: left;">
Narration
</th>
<th style="width: 18%; text-align: right;">
Amount
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="TD in TDS track by TD.id">
<td style="width: 5%; text-align: left;">
<button class="btn" ng-click="editTD(TD.id)">
<span class="glyphicon glyphicon-pencil"></span>Edit
</button>
</td>
<td style="width: 5%; text-align: left;">
{{ TD.dbcr }}
</td>
<td style="width: 25%; text-align: left;">
{{ TD.glhead }}
</td>
<td style="width: 25%; text-align: left;">
{{ TD.slhead }}
</td>
<td style="width: 25%; text-align: left;">
{{ TD.narr }}
</td>
<td style="width: 18%; text-align: right;">
{{ TD.amt }}
</td>
</tr>
</tbody>
</table>
jQuery Please note that if I remove $scope.$apply(), no error shows up but data is also not shown.
$scope.OpenTemp = function () {
var vFileName = $("#TempList").val();
$scope.sysmsg = 'Opening voucher from temporary location';
var to = "../../WHS/OpenTempJV.ashx";
var options = {
type: "POST",
url: to,
data: { vFile: vFileName },
error: function () {
ShowErrorMsg("Error in opening temporary voucher");
},
success: function (data) {
if (data != "") {
//alert(data.d);
//$scope.sysmsg = 'success';
$("#divGrid").show();
$scope.TDS = $scope.TDS.concat(data);
//$scope.TDS = data;
//$scope.$apply();
//CalcAllTotals(data);
}
else {
ShowErrorMsg("Could not retrieve temporary voucher");
}
}
};
$.ajax(options);
}
JSON String in data
[
{
"id": 1,
"dbcr": "C",
"glhead": "A B KING PRO EXCERCISER MACHINE AT COST",
"glid": "3",
"slhead": "",
"slid": "0",
"narr": "dfasdf",
"amt": "454",
"$$hashKey": "004"
},
{
"id": 2,
"dbcr": "C",
"glhead": "A.C. AT COST",
"glid": "593",
"slhead": "",
"slid": "0",
"narr": "asdfasdf",
"amt": "32434",
"$$hashKey": "006"
},
{
"id": 3,
"dbcr": "D",
"glhead": "ADD ON COURSES (BOOKS)",
"glid": "6",
"slhead": "",
"slid": "0",
"narr": "asdfasdf",
"amt": "324",
"$$hashKey": "008"
},
{
"id": 4,
"dbcr": "D",
"glhead": "GROUP INSURANCE SCHEME (STUDENTS)",
"glid": "270",
"slhead": "",
"slid": "0",
"narr": "adsfasdfadsf",
"amt": "44324",
"$$hashKey": "00A"
},
{
"id": 5,
"dbcr": "D",
"glhead": "HRA (TEACHING STAFF)",
"glid": "357",
"slhead": "",
"slid": "0",
"narr": "asdfadsfasdfds",
"amt": "11760",
"$$hashKey": "00C"
},
{
"id": 6,
"dbcr": "C",
"glhead": "EXTENSION CONST. OF ADMN. BLOCK BUILDING",
"glid": "267",
"slhead": "",
"slid": "0",
"narr": "adfasdfasdf",
"amt": "23520",
"$$hashKey": "00E"
}
]
Chrome error stack
Error: [ngRepeat:dupes] http://errors.angularjs.org/undefined/ngRepeat/dupes?p0=TD%20in%20TDS%20track%20by%20TD.id&p1=undefined
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:6:453
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:182:179
at Object.fn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:97:409)
at g.$get.g.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:98:304)
at g.$get.g.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:101:12)
at Object.TDController.options.success (http://localhost:49399/DAV_JV/accounts/transaction/jvAng.js:254:28)
at x.Callbacks.l (http://localhost:49399/DAV_JV/js/jquery.min.js:4:24584)
at Object.x.Callbacks.c.fireWith [as resolveWith] (http://localhost:49399/DAV_JV/js/jquery.min.js:4:25405)
at k (http://localhost:49399/DAV_JV/js/jquery.min.js:6:4709)
Related
I am trying to create HTML table with dynamic tr and td.
I have added nested loops in the HTML itself , dynamic column headers(th) are working fine but values are not getting added in correct td.
Here is a data I have :
"finalResult": [
{
"tableNamee": "Table_1",
"colCategories": [
{
"columnnnn": "User",
"values": [
{
"value": "0"
},
{
"value": "10"
},
{
"value": "60"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
}
]
},
{
"columnnnn": "Header1",
"values": [
{
"value": "460"
}
]
},
{
"columnnnn": "Amount",
"values": [
{
"value": "10"
},
{
"value": "100"
},
{
"value": "50"
}
]
}
]
},
{
"tableNamee": "Table_2",
"colCategories": [
{
"columnnnn": "User",
"values": [
{
"value": "07"
},
{
"value": "10"
}
]
},
{
"columnnnn": "Amount",
"values": [
{
"value": "70"
}
]
},
{
"columnnnn": "User1",
"values": [
{
"value": "57"
}
]
},
{
"columnnnn": "Column",
"values": [
{
"value": "80"
}
]
},
{
"columnnnn": "Column2",
"values": [
{
"value": "10"
}
]
}
]
}
]
And below is the html code for it :
<div *ngFor="let j of finalResult; index as i" class="">
<div class=""> <span title="{{j.tableNamee}}">Table Name : {{j.tableNamee}} </span>
</div>
<div class="">
<table class="table table-bordered">
<tbody>
<tr class="">
<th class="" scope="col" *ngFor="let k of j.colCategories">
{{k.columnnnn}}
</th>
</tr>
<ng-container *ngFor="let k of j.colCategories">
<tr class="">
<ng-container>
<div *ngFor="let m of k.values">
<td class="">
<div class=""> <span title="{{m.value}}"> {{m.value}} </span>
</div>
</td>
</div>
</ng-container>
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>
There is no any specific ts code for this. I just manipulated data in above format and trying to apply loops in HTML itself. Am I doing anything wrong?
this is desired output :
desired output
and this is current output I am getting :
current output
Any help would be appreciated!
Your HTML markup looks weird in that your <tr> contains a <div> which wraps the <td>s. And I think that is what's causing your problem.
I have not tried this but may you can try changing your <table> markup to this:
<table class="table table-bordered">
<thead>
<tr class="">
<th class="" scope="col" *ngFor="let k of j.colCategories">
{{k.columnnnn}}
</th>
</tr>
</thead>
<tbody>
<tr class="" *ngFor="let k of j.colCategories">
<td class="" *ngFor="let m of k.values">
<div class="">
<span title="{{m.value}}"> {{m.value}} </span>
</div>
</td>
</tr>
</tbody>
</table>
I'm working on aligning a vegalite graph to the center of the webpage, but I've only been able to get it displaying on the left side.
I have two other graphs that I've been able to place right next to each other, but I'm pretty lost on how to center the first graph.
I'm looking to create something like this:
Graph 1
Graph 2 Graph 3
Here is what I have so far, and it is currently displayed like this:
Graph 1
Graph 2 Graph3
<table>
<thread>
<tr>
<th colspan="2">U.S. Gasoline Retail Prices</th>
</tr>
</thread>
<tr>
<td><div id="vis2" display="block"></div></td>
</tr>
</table>
<br><br>
<table>
<thread>
<tr>
<th colspan="1">Average Annual Consumer Price Index(CPI) for Gasoline</th>
<th colspan="2">Annual Crude Oil Price by Barrel(42 gallons)</th>
</tr>
</thread>
<tr>
<td><div id="vis3"></div></td>
<td><div id="vis4"></div></td>
</tr>
</table>
You can simply add style in your table as width: 100%; and in your div blocks you can use style="display: block;" where you are trying to display the vega chart. Also in your vega spec config, add width: 'container' which will keep the width size as per the parent container.
Refer the below snippet or fiddle:
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [{
"a": "A",
"b": 28
}, {
"a": "B",
"b": 55
}, {
"a": "C",
"b": 43
},
{
"a": "D",
"b": 91
}, {
"a": "E",
"b": 81
}, {
"a": "F",
"b": 53
},
{
"a": "G",
"b": 19
}, {
"a": "H",
"b": 87
}, {
"a": "I",
"b": 52
}
]
},
"autosize2": {"contains": "padding", "resize": true, "type": "fit"},
width: 'container',
"mark": "bar",
"encoding": {
"x": {
"field": "a",
"type": "ordinal"
},
"y": {
"field": "b",
"type": "quantitative"
}
}
}
vegaEmbed("#vis2", yourVlSpec, {renderer: 'svg'}).then(res => {
var view = res.view;
//console.log(view.data('source_0'));
});
vegaEmbed("#vis3", yourVlSpec, {renderer: 'svg'}).then(res => {
var view = res.view;
//console.log(view.data('source_0'));
});
vegaEmbed("#vis4", yourVlSpec, {renderer: 'svg'}).then(res => {
var view = res.view;
//console.log(view.data('source_0'));
});
<script src="https://cdn.jsdelivr.net/npm/vega#5.20.2/build/vega.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#5.0.0/build/vega-lite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6.17.0/build/vega-embed.min.js"></script>
<table style="width: 100%;">
<thread>
<tr>
<th colspan="2">U.S. Gasoline Retail Prices</th>
</tr>
</thread>
<tr>
<td><div style="display: block;" id="vis2"></div></td>
</tr>
</table>
<br><br>
<table style="width: 100%;">>
<thread>
<tr>
<th colspan="1">Average Annual Consumer Price Index(CPI) for Gasoline</th>
<th colspan="2">Annual Crude Oil Price by Barrel(42 gallons)</th>
</tr>
</thread>
<tr>
<td><div style="display: block;" id="vis3"></div></td>
<td><div style="display: block;" id="vis4"></div></td>
</tr>
</table>
Hi need help on how to loop this array value into 3 column using angularjs.
Currently my view is like this
Html table contain 3 column the value showing in vertical instead of horizontal
Below is my JSON view
{
"Table1": {
"titleList": [
"Table1",
"Start Date",
"Completion Date"
]
"dataList": [
{
"Name": "Ayu",
"startDate": "30 Jul 2015",
"completionDate": "30 Jul 2015"
}
],
},
"Table2": {
"titleList": [
"Table2",
"Start Date",
"Completion Date"
]
"dataList": [
{
"Name": "Siti",
"startDate": "",
"completionDate": ""
},
{
"Name": "wan",
"startDate": "",
"completionDate": ""
},
{
"Name": "nita",
"startDate": "",
"completionDate": ""
},
],
},
"Table3": {
"titleList": [
"HGA",
"Start Date",
"Completion Date"
]
"dataList": [
{
"Name": "Fatimah",
"startDate": "",
"completionDate": ""
},
{
"Name": "Nora",
"startDate": "",
"completionDate": ""
},
],
}
}
My angularjs showing as below
<tbody ng-repeat ="(nodeSummaryKey, nodeSummaryVal) in nodeSummary">
<tr ng-if="isObject(nodeSummaryVal)" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat = "(dataKey, dataValue) in nodeSummaryVal" >
<td ng-if="dataKey == 'titleList'" class="stx-attributes-group"
ng-repeat="(eachDataKey, eachDataValue) in nodeSummaryVal.titleList">{{eachDataValue}}</td>
<td ng-if="dataKey == 'dataList'" ng-repeat="(eachDataKey, eachDataValue) in dataValue">
<div ng-repeat="(eachKey, eachValue) in eachDataValue">{{eachValue}}</div>
</tr>
</tbody>
You could achieve it by simple ng-repeat:
angular.module('app', []).controller('Controller', function($scope) {
$scope.table_data = {
"Table1": {
"titleList": ["Table1", "Start Date", "Completion Date"],
"dataList": [{
"Name": "Ayu",
"startDate": "30 Jul 2015",
"completionDate": "30 Jul 2015"
}],
},
"Table2": {
"titleList": ["Table2", "Start Date", "Completion Date"],
"dataList": [{
"Name": "Siti",
"startDate": "",
"completionDate": ""
}, {
"Name": "wan",
"startDate": "",
"completionDate": ""
}, {
"Name": "nita",
"startDate": "",
"completionDate": ""
}, ],
},
"Table3": {
"titleList": ["HGA", "Start Date", "Completion Date"],
"dataList": [{
"Name": "Fatimah",
"startDate": "",
"completionDate": ""
}, {
"Name": "Nora",
"startDate": "",
"completionDate": ""
}, ],
}
};
});
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
<!DOCTYPE html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="Controller">
<div ng-repeat="(dta_key,dta_value) in table_data">
<h1>{{dta_key}}</h1>
<table >
<thead>
<tr>
<th ng-repeat="thead in dta_value.titleList">{{thead}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tbody in dta_value.dataList">
<td ng-repeat="trow in tbody">{{trow}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
I would like to extract some JSON data from the following url:
http://weather.news24.com/sa/johannesburg.
I used the Google developer tools which gave me some JSON and when I tried some online JSON validators, it's failing somehow on dates. Is there anyway I can get around the issue and correctly get the selected city JSON data?
Any help will be appreciated.
If the site does not offer a RESful service, then you may need to ask them if you want to scrape their page. Web page scraping is very tedious and the site's DOM structure could change at any time. There is no guarantee.
Page Scraping
You can scrape the page and convert the table data into a JSON object. I copied the DOM of the webpage as a bassis for this implementation.
If you generate the results below, the following response should be at the bottom.
{
"windSpeed": "13km/h",
"windDirection": "NW",
"humidity": "35%",
"dewPoint": "14",
"comfortLevel": "30°C",
"chanceOfRain": "10%",
"sunrise": "5:57AM",
"sunset": "6:45PM",
"moonrise": "6:34PM",
"moonset": "5:30AM",
"moonPhase": "Full moon"
}
Example
// jQuery Plugins
(function($) {
$.reduce = function(arr, fnReduce, valueInitial) {
if (Array.prototype.reduce) {
return Array.prototype.reduce.call(arr, fnReduce, valueInitial);
}
$.each(arr, function(index, value) {
valueInitial = fnReduce.call(null, valueInitial, value, index, arr);
});
return valueInitial;
};
})(jQuery);
// Used to convert a sequence of words to camelCase.
function camelCase(input) {
return input.toLowerCase().replace(/\s(.)/g, function(match, group1) {
return group1.toUpperCase();
});
}
// Main
$(function() {
// Replace relative links with absolute.
$('img').each(function() {
$(this).attr('src', 'http://weather.news24.com/' + $(this).attr('src'));
});
// Find all table rows and grab the key-value pairs.
var data = $.reduce($('#forecastContent tr'), function(map, tr) {
var td = $(tr).find('td'), key, value;
if (td.length === 2) {
key = $(td.get(0)).text();
value = $(td.get(1)).text();
} else if (td.length === 3) {
key = $(td.get(1)).text();
value = $(td.get(2)).text();
}
if (key != null && key.trim().length > 0) {
map[camelCase(key)] = value;
}
return map;
}, {});
$('#response').html(JSON.stringify(data, null, 2));
});
body {
background: #FFF;
}
.bold {
font-weight: bold;
}
.currentConditionsHeader {
color: #1F38B7;
font-weight: bold;
}
.forecast7DayBlockEmbedded {
width: 80px;
height: 70px;
border: 1px solid #EAEFF2;
text-align: center;
padding-top: 10px;
float: left;
white-space: nowrap;
margin-left: 13px;
margin-top: 5px;
margin-bottom: 15px;
font-family: Verdana;
font-size: 10px;
font-weight: bold;
}
.forecastHeading {
color: #000000;
background-color: #D6F1FC;
font-weight: bold;
padding: 3px;
}
#response {
background: #EEE;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="forecastContent">
<table cellpadding="0" celspacing="0" border="0">
<tbody>
<tr>
<td>
<div id="divCurrentOne" class="currentConditionsOneTable" style="white-space:nowrap;">
<div class="float-l">
<table cellpadding="2" cellspacing="2" border="0" class="currentConditionsOneTable">
<tbody>
<tr>
<td colspan="2" class="currentConditionsHeader" style="vertical-align:middle;"> <img tyle="vertical-align:middle;" src="/Images/Icons/Forecasts/2.gif">LOW 17°C HIGH 24°C </td>
</tr>
<!-- Provide space and set column widths -->
<tr>
<td style="width:110px;"> </td>
<td style="width:110px;"> </td>
</tr>
<!-- end spacer and width definition row -->
<tr>
<td>Wind Speed</td>
<td class="bold">13km/h</td>
</tr>
<tr>
<td>Wind Direction</td>
<td class="bold">NW</td>
</tr>
<tr>
<td>Humidity</td>
<td class="bold">35%</td>
</tr>
<tr>
<td>Dew Point</td>
<td class="bold">14</td>
</tr>
<tr>
<td>Comfort Level</td>
<td class="bold">30°C</td>
</tr>
<tr>
<td>Chance of Rain</td>
<td class="bold">10%</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
<td>
<div id="divAstronomy" class="currentConditionsAstronomyTable" style="white-space:nowrap;">
<div class="float-l">
<table cellpadding="2" cellspacing="2" border="0" class="currentConditionsAstronomyTable">
<tbody>
<tr>
<td colspan="3"> </td>
</tr>
<!-- Provide space and set column widths -->
<tr>
<td> </td>
<td> </td>
<td style="width:100%;"> </td>
</tr>
<!-- end spacer and width definition row -->
<tr>
<td> </td>
<td>Sunrise</td>
<td class="bold">5:57AM</td>
</tr>
<tr>
<td> </td>
<td>Sunset</td>
<td class="bold">6:45PM</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="bold"> </td>
</tr>
<tr>
<td rowspan="2" class="currentConditionsMoonImage"><img src="/Images/Icons/Moon/cw_full_moon.gif"></td>
<td>Moonrise</td>
<td class="bold">6:34PM</td>
</tr>
<tr>
<td>Moonset</td>
<td class="bold">5:30AM</td>
</tr>
<tr>
<td> </td>
<td>Moon Phase</td>
<td class="bold">Full moon</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" id="div7DayForecast" style="width:100%;white-space:nowrap;">
<div class="forecast7DayEmbeddedContainer">
<div class="forecast7DayContainer">
<br>
<br>
<div id="7dayforecast" class="forecastHeading">7 Day Forecast</div>
<div class="forecast7DayBlockEmbedded"> Tuesday
<br> <img src="/Images/Icons/Forecasts/2.gif">
<br> 17°C - 27°C </div>
<div class="forecast7DayBlockEmbedded"> Wednesday
<br> <img src="/Images/Icons/Forecasts/33.gif">
<br> 17°C - 28°C </div>
<div class="forecast7DayBlockEmbedded"> Thursday
<br> <img src="/Images/Icons/Forecasts/33.gif">
<br> 16°C - 29°C </div>
<div class="forecast7DayBlockEmbedded"> Friday
<br> <img src="/Images/Icons/Forecasts/33.gif">
<br> 17°C - 28°C </div>
<div class="forecast7DayBlockEmbedded"> Saturday
<br> <img src="/Images/Icons/Forecasts/4.gif">
<br> 16°C - 27°C </div>
<div class="forecast7DayBlockEmbedded"> Sunday
<br> <img src="/Images/Icons/Forecasts/22.gif">
<br> 16°C - 26°C </div>
<div class="forecast7DayBlockEmbedded"> Monday
<br> <img src="/Images/Icons/Forecasts/4.gif">
<br> 15°C - 27°C </div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<hr />
<h2>Response</h2>
<pre>
<code id="response"></code>
</pre>
RESTful Options
There are free REST APIs that return JSON weather data. All you need to do is sign up and receive a key.
OpenWeatherMap
API: http://openweathermap.org/api
Request: http://api.openweathermap.org/data/2.5/weather?q=johannesburg,za&appid=YOUR_KEY
Response
{
coord: {
lon: 28.04,
lat: -26.2
},
weather: [{
id: 801,
main: "Clouds",
description: "few clouds",
icon: "02d"
}],
base: "cmc stations",
main: {
temp: 304.367,
pressure: 852.81,
humidity: 26,
temp_min: 304.367,
temp_max: 304.367,
sea_level: 1022.08,
grnd_level: 852.81
},
wind: {
speed: 2.51,
deg: 296.507
},
clouds: {
all: 20
},
dt: 1456147770,
sys: {
message: 0.0116,
country: "ZA",
sunrise: 1456113434,
sunset: 1456159501
},
id: 993800,
name: "Johannesburg",
cod: 200
}
Weather Underground
API: https://www.wunderground.com/weather/api/
Request: http://api.wunderground.com/api/YOUR_KEY/conditions/q/ZA/Johannesburg.json
Response
{
response: {
version: "0.1",
termsofService: "http://www.wunderground.com/weather/api/d/terms.html",
features: {
conditions: 1
}
},
current_observation: {
image: {
url: "http://icons.wxug.com/graphics/wu2/logo_130x80.png",
title: "Weather Underground",
link: "http://www.wunderground.com"
},
display_location: {
full: "Johannesburg, South Africa",
city: "Johannesburg",
state: "",
state_name: "South Africa",
country: "ZA",
country_iso3166: "ZA",
zip: "00000",
magic: "1",
wmo: "68368",
latitude: "-26.12999916",
longitude: "28.22999954",
elevation: "1700.00000000"
},
observation_location: {
full: "Johannesburg, ",
city: "Johannesburg",
state: "",
country: "ZA",
country_iso3166: "ZA",
latitude: "-26.13077927",
longitude: "28.24378967",
elevation: "5643 ft"
},
estimated: {},
station_id: "FAOR",
observation_time: "Last Updated on February 22, 3:30 PM SAST",
observation_time_rfc822: "Mon, 22 Feb 2016 15:30:00 +0200",
observation_epoch: "1456147800",
local_time_rfc822: "Mon, 22 Feb 2016 15:44:41 +0200",
local_epoch: "1456148681",
local_tz_short: "SAST",
local_tz_long: "Africa/Johannesburg",
local_tz_offset: "+0200",
weather: "Scattered Clouds",
temperature_string: "84 F (29 C)",
temp_f: 84,
temp_c: 29,
relative_humidity: "29%",
wind_string: "From the WNW at 10 MPH",
wind_dir: "WNW",
wind_degrees: 290,
wind_mph: 10,
wind_gust_mph: 0,
wind_kph: 17,
wind_gust_kph: 0,
pressure_mb: "1020",
pressure_in: "30.12",
pressure_trend: "0",
dewpoint_string: "48 F (9 C)",
dewpoint_f: 48,
dewpoint_c: 9,
heat_index_string: "NA",
heat_index_f: "NA",
heat_index_c: "NA",
windchill_string: "NA",
windchill_f: "NA",
windchill_c: "NA",
feelslike_string: "84 F (29 C)",
feelslike_f: "84",
feelslike_c: "29",
visibility_mi: "6.2",
visibility_km: "10.0",
solarradiation: "--",
UV: "6",
precip_1hr_string: "-9999.00 in (-9999.00 mm)",
precip_1hr_in: "-9999.00",
precip_1hr_metric: "--",
precip_today_string: "0.00 in (0.0 mm)",
precip_today_in: "0.00",
precip_today_metric: "0.0",
icon: "partlycloudy",
icon_url: "http://icons.wxug.com/i/c/k/partlycloudy.gif",
forecast_url: "http://www.wunderground.com/global/stations/68368.html",
history_url: "http://www.wunderground.com/history/airport/FAOR/2016/2/22/DailyHistory.html",
ob_url: "http://www.wunderground.com/cgi-bin/findweather/getForecast?query=-26.13077927,28.24378967",
nowcast: ""
}
}
Hi its kinda long to explain my problem but i will try,
I use Angular and I have that json in a file:
{
"users": [
{
"gender": "male",
"title": "mr",
"first": "francisco",
"last": "medina",
"street": "2748 w dallas st",
"city": "flowermound",
"state": "new jersey",
"zip": "77511",
"email": "francisco.medina65#example.com",
"dob": "454252284",
"phone": "(757)-889-2571",
"cell": "(113)-542-2123",
"picture": {
"large": "http://api.randomuser.me/portraits/men/22.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/men/22.jpg"
}
},
{
"gender": "female",
"title": "mrs",
"first": "sherry",
"last": "elliott",
"street": "3251 brown terrace",
"city": "wichita falls",
"state": "washington",
"zip": "79455",
"email": "sherry.elliott17#example.com",
"dob": "224238139",
"phone": "(225)-793-2067",
"cell": "(968)-555-1402",
"picture": {
"large": "http://api.randomuser.me/portraits/women/37.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/women/37.jpg"
}
},
{
"gender": "male",
"title": "mr",
"first": "johnny",
"last": "medina",
"street": "1313 samaritan dr",
"city": "redding",
"state": "new hampshire",
"zip": "43269",
"email": "johnny.medina76#example.com",
"dob": "259176886",
"phone": "(991)-957-7139",
"cell": "(502)-773-1487",
"picture": {
"large": "http://api.randomuser.me/portraits/men/90.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/men/90.jpg"
}
}
]
}
I make http request to get the json and build a table with the results the problem is that I have to access the thumbnail picture and when i do access it it retruns me undefined, so in my opinion there is need for another http request inside that I already have but I return from the first http request three objects, so i will probably (in my opinion as I said) will need three more http requests , this is my angular code:
<!DOCTYPE html>
<html ng-app="DemoApp">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/i18n/angular-locale_da.js"></script>
<style>
table,td{
border:1px solid black;
border-collapse:collapse;
padding:5px;
}
table tr:nth-child(even)
{
background-color:#ffffff;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table th {
background-color: black;
color: white;
}
</style>
</head>
<body ng-controller="Controller as ctr">
<div class="container">
<div>
<div class="col-md-9">
<table class="table" id="orders">
<thead>
<tr>
<th>Index</th>
<th>picture</th>
<th>Name</th>
<th>Last Name</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users.users ">
<td>{{$index+1}}</td>
<td>{{user.thumbnail}}</td>
<td>{{user.first }}</td>
<td>{{user.last}}</td>
<td>Details
<!-- <td>
edit
<button ng-click ="ctrl.deleteCar(car.id)" class="remove">X</button>
delete
</td>-->
</tr>
</tbody>
</table>
</div>
<div class="col-md-3" style="border: thin lightblue solid; border-radius: 5px;padding: 1em;">
</div>
</div>
</div>
<script>
var app = angular.module('DemoApp', []);
app.controller('Controller', function($http,$scope){
var self = this;
$scope.users=[];
$scope.photoTumbnails=[];
//var users=[];
$http({
method: 'GET',
url: 'data.json'
}).then(function successCallback(response)
{
$scope.users = response.data;
console.log("The data from the file is "+$scope.users.users)
console.log("The data from the file is "+$scope.users.users.thumbnail)
}, function errorCallback(response)
{
$scope.error = response.status + ": " + response.data.statusText;
});
});
</script>
</body>
</html>
So Can I get the image to be displayed
Change
<td>{{user.thumbnail}}</td>
to
<td><img ng-src="user.picture.thumbnail"/></td>