AngularJS Images from JSON file would not load using ng-src how to display image - html

I am using AngularJS to read image data from a JSON file, which works for other data except images.
ng-src is not fetching any image?
I need to load all the images to the div and populate the src, alt, and title attributes of the image data I read in using ng-repeat, however it does not work. What happen?
Then, I am not sure the way the code is setup works?
These are my code-
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body ng-controller = "storeController">
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<!--<button class="btn btn-primary" ng-click="showMessage = !showMessage">Toggle Message</button>
<h2 ng-show="showMessage == true">Secret Message</h2>
<input type="text" placeholder="Leave a Message" ng-model="message">
<h2>{{ message }}</h2>-->
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">ngPlaces</a>
</div>
</div>
</div>
<div class="container">
<div class="col-sm-4" ng-repeat = "place in places">
<div class="thumbnail">
<img ng-src="images/{{cribs.image}}.jpg" alt="">
<div class="caption">
<h3>{{place.address}}</h3>
<p><strong>Type:</strong>{{place.type}}</p>
<p><strong>Description:</strong>{{place.description}}</p>
<p><strong>Price:</strong>{{place.price | currency}}</p>
</div>
</div>
</div>
</div>
</body>
</html>
my json data
[
{
"id": 1,
"type": "Condo",
"price": 220000,
"address": "213 Grove Street",
"description": "Excellent place, really nice view!",
"details": {
"bedrooms": 2,
"bathrooms": 1.5,
"area": 921
},
"image":"crib-1"
},
{
"id": 2,
"type": "House",
"price": 410500,
"address": "7823 Winding Way",
"description": "Beautiful home with lots of space for a large family.",
"details": {
"bedrooms": 4,
"bathrooms": 3,
"area": 2145
},
"image":"crib-2"
},
{
"id": 3,
"type": "Duplex",
"price": 395000,
"address": "834 River Lane",
"description": "Great neighbourhood and lot's of nice green space.",
"details": {
"bedrooms": 3,
"bathrooms": 2.5,
"area": 1500
},
"image":"crib-3"
},
{
"id": 4,
"type": "House",
"price": 755990,
"address": "7807 Forest Avenue",
"description": "Best house on the block!",
"details": {
"bedrooms": 6,
"bathrooms": 4.5,
"area": 3230
},
"image":"crib-4"
},
{
"id": 5,
"type": "Condo",
"price": 210500,
"address": "1857 Andover Court",
"description": "Nice little condo with room to grow.",
"details": {
"bedrooms": 2,
"bathrooms": 1.5,
"area": 1023
},
"image":"crib-5"
},
{
"id": 6,
"type": "House",
"price": 334900,
"address": "7398 East Avenue",
"description": "You'll love the view!",
"details": {
"bedrooms": 4,
"bathrooms": 2.5,
"area": 1788
},
"image":"crib-6"
}
]
app.js
(function(){
var app = angular.module('store', []);
app.controller('storeController', function($scope, placesFactory){
$scope.places;
placesFactory.getPlaces().then(function(response){
$scope.places = response.data;
});
$scope.sayHello = function(){
console.log("Hello");
}
});
app.factory('placesFactory', function($http){
function getPlaces(){
return $http.get('data.json');
}
return {
getPlaces: getPlaces
}
});
})();


Change
From
<img ng-src="images/{{cribs.image}}.jpg" alt="">
To
<img ng-src="images/{{place.image}}.jpg" alt="">

Related

Why is Leaflet Ajax not processing and displaying GeoJSON data?

I have been trying for weeks to get Leaflet Ajax to accept data requests from the Land Information New Zealand (LINZ) API without success.
I have a valid key (not included in the snippet) and have tried several tests to load this data in. Other datasets from the LINZ API do not worth either.
What am I doing wrong here?
<html>
<head>
<!-- Style -->
<link rel="stylesheet" href="css/style.css">
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<!-- Leaflet Ajax -->
<script type='text/javascript' src="./js/leaflet.ajax.js"></script>
<div id="map"></div>
</head>
<body>
<script>
map = L.map('map').setView([-41.29132, 174.77931],16)
var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 17,
attribution: 'Map data: © OpenStreetMap contributors, SRTM | Map style: © OpenTopoMap (CC-BY-SA)'
});
OpenTopoMap.addTo(map)
property_tiles_link = "https://data.linz.govt.nz/services/query/v1/vector.json?key=KEY_GOES_HERE&layer=50804&x=172.61706383056807&y=-43.57379489129212&max_results=3&radius=10000&geometry=true&with_field_names=true"
geojson = new L.GeoJSON.AJAX(property_tiles_link).addTo(map)
console.log(geojson)
overlays = {
"geojson": geojson
}
basemaps = {
"OpenTopoMap": OpenTopoMap
}
L.control.layers(basemaps, overlays).addTo(map)
</script>
</body>
The code snippet results in this output:
Looking through the logged GeoJSON object does not seem to show any successfully parsed data. The error message in Firefox translates roughly to "The configuration of HTML characters hasn't been declared. The document will show 'rubbish' text in some configurations of the browser."
Any ideas would be super helpful!
An example of the response:
{
"vectorQuery": {
"layers": {
"50804": {
"crs": {
"type": "name",
"properties": {
"name": "EPSG:4326"
}
},
"field_names": ["id", "title_no", "status", "type", "land_district", "issue_date", "guarantee_status", "estate_description", "number_owners", "spatial_extents_shared"],
"type": "FeatureCollection",
"features": [{
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[175.4776337167, -41.2221699],
[175.4782420833, -41.2225527833],
[175.4801549333, -41.2237566167],
[175.476269, -41.2259343],
[175.47357595, -41.22444375],
[175.4776337167, -41.2221699]
]
]
]
},
"distance": 0,
"type": "Feature",
"properties": {
"id": 1468560,
"title_no": "WN53B/277",
"status": "LIVE",
"type": "Freehold",
"land_district": "Wellington",
"issue_date": "1998-04-16 00:00:00",
"guarantee_status": "Guarantee",
"estate_description": "Fee Simple, 1/1, Lot 1 Deposited Plan 85426, 110,945 m2",
"number_owners": 1,
"spatial_extents_shared": false
},
"id": 1191838
}, {
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[175.48005638330002, -41.2282570333],
[175.48105425000003, -41.2286012667],
[175.4789359, -41.2297867333],
[175.47874645, -41.2298923],
[175.4767530167, -41.2310074667],
[175.47604405, -41.2314040667],
[175.47550265, -41.23170695000001],
[175.4749415833, -41.2320208833],
[175.4745023167, -41.2322666333],
[175.474015, -41.2317699833],
[175.4735909, -41.23133785000001],
[175.4735833, -41.2313303667],
[175.4732046667, -41.23094425],
[175.4728425667, -41.2305752833],
[175.4725057833, -41.2302328833],
[175.4722412333, -41.2299625],
[175.4719444667, -41.2296600833],
[175.4715930333, -41.22930195],
[175.47127355, -41.2289763667],
[175.4712437333, -41.2289459833],
[175.4708617, -41.22855675],
[175.4704157833, -41.2281024167],
[175.4699766167, -41.227654983300006],
[175.4692410167, -41.2269055],
[175.4692395833, -41.2269040667],
[175.46921793330003, -41.2268834667],
[175.4718439333, -41.2254143333],
[175.4733724167, -41.2245578167],
[175.48005638330002, -41.2282570333]
]
]
]
},
"distance": 134,
"type": "Feature",
"properties": {
"id": 2348803,
"title_no": "WN103/58",
"status": "LIVE",
"type": "Freehold",
"land_district": "Wellington",
"issue_date": "1899-10-23 00:00:00",
"guarantee_status": "Guarantee",
"estate_description": "Fee Simple, 1/1, Lot 75 Deposited Plan 579, 409,390 m2",
"number_owners": 1,
"spatial_extents_shared": true
},
"id": 5113879
}, {
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[175.48005638330002, -41.2282570333],
[175.48105425000003, -41.2286012667],
[175.4789359, -41.2297867333],
[175.47874645, -41.2298923],
[175.4767530167, -41.2310074667],
[175.47604405, -41.2314040667],
[175.47550265, -41.23170695000001],
[175.4749415833, -41.2320208833],
[175.4745023167, -41.2322666333],
[175.474015, -41.2317699833],
[175.4735909, -41.23133785000001],
[175.4735833, -41.2313303667],
[175.4732046667, -41.23094425],
[175.4728425667, -41.2305752833],
[175.4725057833, -41.2302328833],
[175.4722412333, -41.2299625],
[175.4719444667, -41.2296600833],
[175.4715930333, -41.22930195],
[175.47127355, -41.2289763667],
[175.4712437333, -41.2289459833],
[175.4708617, -41.22855675],
[175.4704157833, -41.2281024167],
[175.4699766167, -41.227654983300006],
[175.4692410167, -41.2269055],
[175.4692395833, -41.2269040667],
[175.46921793330003, -41.2268834667],
[175.4718439333, -41.2254143333],
[175.4733724167, -41.2245578167],
[175.48005638330002, -41.2282570333]
]
]
]
},
"distance": 134,
"type": "Feature",
"properties": {
"id": 4177014,
"title_no": "94991",
"status": "LIVE",
"type": "Leasehold",
"land_district": "Wellington",
"issue_date": "2003-06-10 09:00:00",
"guarantee_status": "Guarantee",
"estate_description": "Leasehold, 1/1, Lot 75 Deposited Plan 579, 409,390 m2",
"number_owners": 1,
"spatial_extents_shared": true
},
"id": 5116291
}]
}
}
}
}

The Leaflet-ajax plugin expects directly a GeoJSON compliant object in the loaded data, whereas in the sample response you show, the structure of the response is:
{
"vectorQuery": {
"layers": {
[layerId]: {
// GeoJSON FeatureCollection
}
}
}
}
Therefore you have to convert this data into a GeoJSON object first. Here in this case it looks quite simple, as you just have to extract the FeatureCollection. You can use leaflet-ajax middleware option to perform this conversion between the reception of the data and before it is processed to be transformed into Leaflet layers:
new L.GeoJSON.AJAX("url", {
middleware(rawData) {
// Extract the GeoJSON FeatureCollection
const layerId = 50804;
return rawData.vectorQuery.layers[layerId];
}
});

How to populate JSON data into Bootstrap 4 second level drop down menu

The attached image is my expected result. Every menu item has two more items 'Dashboard' and 'Battery Trends'. Every 'Dashboard' and 'Battery Trends' will have different URLs, which is defined as 'navigationurl' in the JSON file.
I have tried and reached here- https://themepack.net/aaa/jsondata But it's displaying 'undefined'.
It's the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc." />
<link rel="stylesheet" href="https://dashkit.goodthemes.co/assets/fonts/feather/feather.css" />
<link rel="stylesheet" href="https://dashkit.goodthemes.co/assets/css/theme.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light" id="topnav">
<div class="collapse navbar-collapse mr-lg-auto order-lg-first" id="navbar">
<ul class="navbar-nav mr-lg-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle " href="#" id="topnavDocumentation" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Battery Trends</a>
<ul class="dropdown-menu" aria-labelledby="topnavDocumentation" id="myDropdown">
<li class="dropright">
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!-- JAVASCRIPT
================================================== -->
<script src="https://dashkit.goodthemes.co/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="https://dashkit.goodthemes.co/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://dashkit.goodthemes.co/assets/js/dashkit.min.js"></script>
<script>
$(function () {
$.getJSON('dashtrend.json', function (loadMainItem) {
$.each(loadMainItem.data, function (i, f) {
var makemenu = "<a href='#' class='dropdown-item dropdown-toggle' id='" + f.id + "' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>" + f.text + "</a>";
$.each(loadMainItem.data, function (j) {
makemenu += "<div class='dropdown-menu' aria-labelledby='" + loadMainItem.data[i].items.id + "'><a class='dropdown-item' href='" + loadMainItem.data[i].items.navigationurl + "'>" + loadMainItem.data[j].items.text + "</a></div>";
})
// <div class="dropdown-menu" aria-labelledby="ups4">
// <a class="dropdown-item" href="/Ups/UpsDashboard?upsid=1">Dashboard</a>
// <a class="dropdown-item" href="/Ups/Trends?id=1">Battery Trends</a>
// </div>
$(makemenu).appendTo("#myDropdown li");
});
});
});
</script>
</body>
</html>
And it's the JSON code:
{
"data": [
{
"id": 1,
"text": "80KVA Server UPS4\r\n (Out of Warranty)",
"icon": "rowfield",
"navigationurl": null,
"items": [
{
"id": 1,
"text": "DashBoard",
"icon": "refresh",
"navigationurl": "/Ups/UpsDashboard?upsid=1",
"items": []
},
{
"id": 1,
"text": "Battery Trends",
"icon": "tips",
"navigationurl": "/Ups/Trends?id=1",
"items": []
}
]
},
{
"id": 2,
"text": "80KVA Server UPS5\r\n (Out of Warranty)",
"icon": "rowfield",
"navigationurl": null,
"items": [
{
"id": 2,
"text": "DashBoard",
"icon": "refresh",
"navigationurl": "/Ups/UpsDashboard?upsid=2",
"items": []
},
{
"id": 2,
"text": "Battery Trends",
"icon": "tips",
"navigationurl": "/Ups/Trends?id=2",
"items": []
}
]
},
{
"id": 3,
"text": "80KVA EL\r\n (Out of Warranty)",
"icon": "rowfield",
"navigationurl": null,
"items": [
{
"id": 3,
"text": "DashBoard",
"icon": "refresh",
"navigationurl": "/Ups/UpsDashboard?upsid=3",
"items": []
},
{
"id": 3,
"text": "Battery Trends",
"icon": "tips",
"navigationurl": "/Ups/Trends?id=3",
"items": []
}
]
},
{
"id": 4,
"text": "60KVA W/S Hub UPS1\r\n",
"icon": "rowfield",
"navigationurl": null,
"items": [
{
"id": 4,
"text": "DashBoard",
"icon": "refresh",
"navigationurl": "/Ups/UpsDashboard?upsid=4",
"items": []
},
{
"id": 4,
"text": "Battery Trends",
"icon": "tips",
"navigationurl": "/Ups/Trends?id=4",
"items": []
}
]
},
{
"id": 5,
"text": "60KVA W/S Hub UPS2",
"icon": "rowfield",
"navigationurl": null,
"items": [
{
"id": 5,
"text": "DashBoard",
"icon": "refresh",
"navigationurl": "/Ups/UpsDashboard?upsid=5",
"items": []
},
{
"id": 5,
"text": "Battery Trends",
"icon": "tips",
"navigationurl": "/Ups/Trends?id=5",
"items": []
}
]
}
],
"totalCount": -1,
"groupCount": -1,
"summary": null
}
How to I can populate the second level dropdown item and get the expected result?
[NB: I'll apply the code into an ASP.NET project. So if you have any dependencies, you can mention it.]
Thanks

I have made some updates to your code and achieve your desire results. Change your code accordingly.
Here is JavaScript code. Note changes
<ul class="dropdown-menu" aria-labelledby="topnavDocumentation" id="myDropdown">
//Just removed <li></li> from here
</ul>
<script>
$(function () {
$.getJSON('dashtrend.json', function (loadMainItem) {
$.each(loadMainItem.data, function (i, f) {
var makemenu = "<li class='dropright'><a href='#' class='dropdown-item dropdown-toggle' id='" + f.id + "' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>" + f.text + "</a>";
makemenu += "<div class='dropdown-menu' aria-labelledby='test'>";
$.each(f.items, function (j) {
makemenu += "<a class='dropdown-item' href='" + f.items[j].navigationurl + "'>" + f.items[j].text + "</a>";
})
makemenu += "</div></li>";
// <div class="dropdown-menu" aria-labelledby="ups4">
// <a class="dropdown-item" href="/Ups/UpsDashboard?upsid=1">Dashboard</a>
// <a class="dropdown-item" href="/Ups/Trends?id=1">Battery Trends</a>
// </div>
$(makemenu).appendTo("#myDropdown");
});
});
});
</script>
1) I have removed the list from ul in HTML
2) I have updated your JavaScript code

How to get response (array of json) and put it in my html component in Angular 4

I am trying to get the array data in a JSON response. The following is my JSON response and I need to get all data to my html tags in component.
{
data : {
"topLikedMedia" : [
{
"id": "1546567845943506613_3718981156",
"type": "image",
"user": {
"id": "3718981156",
"username": "agoramonitor",
"full_name": "AgoraMonitor",
"profile_picture": "https://scontent.cdninstagram.com/t51.2885-19/s150x150/18809269_476795959342067_7353566623065702400_n.jpg"
},
"tags": [
"instagramers",
"content",
"socialmedia",
"marketing",
"branding",
"instagram"
],
"location": null,
"comments": {
"count": 2
},
"formatted_comments_count": "2",
"created_time": "1498585275",
"formatted_time": "Tue, Jun 27, 2017 7:41 PM",
"diff_humans_time": "4 months ago",
"link": "https://www.instagram.com/p/BV2g0MGgPa1/",
"likes": {
"count": 154
},
"formatted_likes_count": "154",
"images": {
"thumbnail": {
"width": 150,
"height": 150,
"url": "https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c244.0.591.591/19533988_862713503881059_8677706625265434624_n.jpg"
},
"low_resolution": {
"width": 320,
"height": 175,
"url": "https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/19533988_862713503881059_8677706625265434624_n.jpg"
},
"standard_resolution": {
"width": 640,
"height": 350,
"url": "https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/19533988_862713503881059_8677706625265434624_n.jpg"
}
},
"caption": "Whether you want to drive leads to your homepage or encourage customer engagement ",
"userHasLiked": false,
"filter": "Normal"
}
],
}
I have the temp of this output and I need to receive this response and distribute it on its own tags and i dont know how

First solution, the Angular way :
getTopLiked() {
this._dashboardService.getTopPosts()
.subscribe(res => {
// Get your data in your component's variable
this.data = res.json();
});
}
In your HTML
<div *ngIf="data">
<div *ngFor="let liked of data.topLikedMedia">
<p>ID : {{liked.id}}</p>
<!-- And you do every other field like that -->
</div>
</div>
Second solution, the old Javascript way
getTopLiked() {
this._dashboardService.getTopPosts()
.subscribe(res => {
this.createMarkup(res.json());
});
}
createMarkup(data: Object) {
this.markup = '';
for (let liked of data.topLikedMedia) {
this.markup += `<p>ID : ${liked.id}</p>`;
// add the other fields like that
}
}
In your HTML
<div *ngIf="markup">
<div [innerHTML]="markup"></div>
</div>

how to get the object inside object in json using angular js

Here is my json file.
{
"countries":[
{
"country": "India",
"cities" : [{
"name": "Bangalore",
"rank": "40"
},
{ "name": "Mumbai",
"rank": "32"
},
{ "name": "Kolkata",
"rank": "54"
},
{ "name": "Chennai",
"rank": "42"
}]
},
{ "country": "China",
"cities":[{"name": "Guangzhou",
"rank": "111"
},
{ "name": "Fuzhou",
"rank": "21"
},
{ "name": "Beijing",
"rank": "90"
},
{ "name": "Baotou",
"rank": "23"
}]
}
]}
I want to show all the name and rank of all the cities in the html table,
but I am unable to do this.
Angular js code is:
app.controller('cityCtrl1', function($scope, $http){
$http.get("http://localhost:8080/Angular%20Examples/angularCountries/app/json/countriesToCities1.json").success(function(data){
$scope.cities = data.countries;
});
});
Html code is:
<tr ng-repeat="city in cities | filter: selectName1">
<div ng-repeat="details in city.cities">
<td> {{details.name}} </td>
<td> {{details.rank}}</td>
</div>
</tr>
Might be I could change the code in controller file for getting the data, but not sure that will work or not.

First thing div inside a tr is not allowed(not working also) - Check this <div> into a <tr>: is it correct?
So I have change format -
<ul class="table" ng-repeat="country in cities.countries">
<li class="city-row" ng-repeat="city in country.cities">
<span class="city-name">{{city.name}}</span>
<span class="city-count">{{city.rank}}</span>
</li>
</ul>
I have created working example - http://plnkr.co/edit/1GTqNPcfigd9XRaAy0vg
Apply your own CSS to display it in table format.

what you are trying to do is,to refer city.states but where as states is not an object of json..change it to city.cities
<tr ng-repeat="city in cities | filter: selectName1">
<div ng-repeat="details in city.cities">
<td> {{details.name}} </td>
<td> {{details.rank}}</td>
</div>
</tr>

How to display this JSON format using AngularJS

I have two JSON formats,
JSON -
[
{
"name":"Alex",
"country":"United States"
},
{
"name":"Jaswanth",
"country":"India"
}
]
AngularJS Code -
I was able to display the output
<div ng-repeat="result in results">
{{result.name}} - {{result.country}}
</div>
But if I change my JSON, I am not able to see the output..
[
{
"info": [
"one",
"two",
{
"id": 944589,
"contractYear": 2014
}
],
"country": "India",
"name": "jaswanth"
},
{
"info": [
"three",
"four",
{
"id": 944589,
"contractYear": 2014
}
],
"country": "US",
"name": "jass"
}
]
How to I change my AngularJS code ?

<div ng-init="init();">
<div ng-repeat="result in data">
{{result.name}} - {{result.country}}
<br/>
<div ng-repeat="(k,v) in result.info">
<span ng-if="v.id">The id is: {{v.id}}</span>
<span ng-if="(!v.id)">{{v}}</span>
</div>
<hr/>
</div>
</div>