fetching data from JSON array in angularJS - javascript

From below JSON I want to retrieve all images from imagePath array. If I try to retrieve single image, it is being fetched smoothly. But the difficulty is arising while fetching imagePath array. Help me with the issue.
Thanks
1). JSON
[{
"senderName": "ABC",
"text": "Enjoy",
"imagePath": [
"../img/jellyfish.jpg",
"../img/cat.jpg",
"../img/fatmice.jpg",
"../img/duck.jpg",
"../img/d.jpg"],
"senderImage": "../img/abc.jpg"
}, {
"senderName": "XYZ",
"text": "Enjoy",
"imagePath": [
"../img/jellyfish.jpg",
"../img/cat.jpg",
"../img/d.jpg"],
"senderImage": "../img/abc.jpg"
}, {
"senderName": "PQR",
"text": "Enjoy",
"imagePath": [
"../img/jellyfish.jpg",
"../img/cat.jpg",
"../img/d.jpg"],
"senderImage": "../img/abc.jpg"
}]
2). that is the controller.js file for the above JSON
http.get('../js/postData.json')
.success(function (response) {
$scope.data = response;
console.log(response);
}).error(function (err) {
console.log(err);
})
3). And the corresponding HTML file is :
<div class="list" ng-repeat="user in data">
<a class="item item-avatar">
<img ng-src="{{user.senderImage}}" align="left">
<h4 align="left">
{{user.senderName}}
</h4>
</a>
<p>
{{user.text}}
</p>
<div>
<img ng-src="{{user.imagePath}}">
</div>
</div>

<div class="list" ng-repeat="user in data">
<a class="item item-avatar">
<img ng-src="{{user.senderImage}}" align="left">
<h4 align="left">
{{user.senderName}}
</h4>
</a>
<p>
{{user.text}}
</p>
<div>
<img ng-src="{{image}}" ng-repeat="image in user.imagePath">
</div>
</div>

Try this if you want to load all images:
<img ng-repeat="imagePath in user.imagePath" ng-src="{{imagePath }}">

try to use a nested loop
<img ng-repeat="singleImg in user.imagePath" ng-src="{{singleImg}}">

try this
<div class="list" ng-repeat="user in data">
<a class="item item-avatar">
<img ng-src="{{user.senderImage}}" align="left">
<h4 align="left">
{{user.senderName}}
</h4>
</a>
<p>
{{user.text}}
</p>
<div>
<!--Changes are made here-->
<div ng-repeat="path in user.imagePath">
<img ng-src="{{path}}">
</div>
<!--Changes ends here-->
</div>
</div>

Related

How to display the results based on their parent selection in angular 8

I am trying to display only the corresponding items on selection of its parent (similar to if country is selected then its corresponding states should display) for that i have this below code but the problem is i am not able to apply the filtering. Can anybody help me resolve in this?
See the code below: (The below code is for first tile on selection of this i am showing below its corresponding account related data)
<div class="col mb-3" *ngFor="let account of cloudAccounts1">
<a href="javascript:;" class="item-card text-dark mat-elevation-z8">
<div class="text-center" (click)="getInstances($event, account)"
[ngClass]="{'bg-info text-white': entry.account == account}">
<div class="card-header py-3">
<div *ngIf="account.accountType === 'AZURE'">
<img class="img-responsive h-25 w-25" src="assets/images/azure.png" />
</div>
<div *ngIf="account.accountType === 'AWS'">
<img class="img-responsive h-25 w-25" src="assets/images/aws.png" />
</div>
<div *ngIf="account.accountType === 'GCP'">
<img class="img-responsive h-25 w-25" src="assets/images/gcp.png" />
</div>
<div class="mt-2"> {{account.accountType}}</div>
</div>
<div class="card-footer no-border py-3">
<div class="text-truncate">{{account.name}}</div>
</div>
</div>
</a>
</div>
The below code is for which when i select any of the above account say AWS or AZURE or GCP then only its corresponding tile should display. The below code.
<div class="col-md-2" *ngIf="showRegion">
<br />
<div class="h6">Instance Type</div>
<div class="row">
<div class="col mb-3" *ngFor="let account of cloudAccounts2">
<a href="javascript:;" class="item-card text-dark mat-elevation-z8">
<div class="text-center">
<div class="card-header py-3">
<div *ngIf="account.accountType === 'AWS'">
<img class="img-responsive h-25 w-25" title="{{account.name}}"
src="assets/images/aws.png">
<div>{{account.accountType}}</div>
</div>
<div *ngIf="account.accountType === 'AZURE'">
<img class="img-responsive h-25 w-25" title="{{account.name}}"
src="assets/images/azure.png">
<div>{{account.accountType}}</div>
</div>
<div *ngIf="account.accountType === 'GCP'">
<img class="img-responsive h-25 w-25" title="{{account.name}}"
src="assets/images/gcp.png">
<div>{{account.accountType}}</div>
</div>
</div>
<div class="card-footer py-3 no-border text-truncate">{{account.name}} <i class="fa fa-external-link" aria-hidden="true"></i></div>
</div>
</a>
</div>
</div>
In cloudAccounts2 array, i have this data, i need to show only one tile on selection of its parent account. But instead its showing all 3 tiles which i dont want.
cloudAccounts1 = [{ "id": "8a8080fc710cdc140171104216c2002b", "accountType": "AWS" },
{ "id": "8a8080fc710cdc140171104216c2002b", "accountType": "AZURE" },
{ "id": "8a8080fc710cdc140171104216c2002b", "accountType": "GCP" }]
Based on the above selection i need to display only its corresponding below data.
cloudAccounts2 = [{"accountType":"AWS", "name":"T2.micro", "link":"https://aws.amazon.com/ec2/pricing/on-demand/"},
{"accountType":"AZURE", "name":"STANDARD_A1", "link":"https://azure.microsoft.com/en-us/pricing/details/virtual-machines/linux/"},
{"accountType":"GCP", "name":"n1-standard-1", "link":"https://cloud.google.com/compute/vm-instance-pricing"}
];
This is the method where i am handling the logic to display only the selected values to display in the template. Can anybody let me know what is my mistake?
getInstances(event, instanceSelected) {
this.classToggled = false;
this.entry.account = instanceSelected;
if(this.entry.account.accountType === instanceSelected.accountType){
this.showInstance = true;
// this.cloudAccounts2 = [];
// this.cloudAccounts2 = [instanceSelected];
if(instanceSelected.accountType === this.cloudAccounts2[1].accountType){
this.cloudAccounts2[1].accountType = instanceSelected.accountType;
}
}
}
It looks like you are trying to do an NgIf within a loop to select your item. Instead of doing that you can create new objects for your selected account (see component) and instead of getInstances() on click do selectAccount1()
Html:
<div *ngFor="let account of cloudAccounts1">
<a (click)="selectAccount1(account)">
...
</a>
</div>
<div *ngFor="let account of cloudAccounts2">
<a (click)="selectAccount2(account)">
...
</a>
</div>
<div *ngIf="selectedAccount1">
<ul>
<li>id: {{ selectedAccount1.id }}</li>
<li>accountType: {{ selectedAccount1.accountType }}</li>
</ul>
</div>
<div *ngIf="selectedAccount2">
<ul>
<li>accountType : {{ selectedAccount2.accountType }} </li>:
<li>name: {{ selectedAccount2.name }}</li>
<li>link: {{ selectedAccount2.link }}</li>
</ul>
</div>
Component:
public selectedAccount1: any;
public selectedAccount2: any;
public selectAccount1(account: any): void {
this.selectedAccount1 = account;
}
public selectAccount2(account: any): void {
this.selectedAccount2 = account;
}

Ng-repeat & Ng-bind-html

Does ng-repeat works inside ng-bind-html?
Where res2 is the StaticPage content. And res is a json file. Notice that I can get the variables from the scope (also print the json Array) but not possible to iterate with the ng-repeat.
Home Controller:
$rootScope.usefulContent = res;
$rootScope.staticContent = $interpolate(res2)($rootScope);
View:
<div ng-controller="homeCtrl" class="headerSize" id="staticPage">
<div ng-bind-html="staticContent"></div>
</div>
Static Page:
<div class="container content-home">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-xs-12">
<div ng-repeat="(key, value) in usefulContent | groupBy: 'Order'">
{{key}}
</div>
<ul class="list-group" data-ng-repeat="(key, value) in usefulContent | groupBy: 'Order'">
<li class="list-group-item">{{key}}
<ul class="list-group">
<li class="list-group-item child" data-ng-repeat="link in value">
{{ link.SUBSECTION }}
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
Col 2
</div>
</div>
</div>
JSON:
[
{
"Order": 1,
"SECTION": "HR",
"SUBSECTION": "Administration",
},
{
"Order": 1,
"SECTION": "HR",
"SUBSECTION": "Self Service",
}
]
Thank you.
Angular doesn't compile the html you included automatically.
This post explains how to do it.

Text content randomising on load

I have a site whereby I have different boxes with certain content that when the user refreshes the content will need to randomise in different boxes every time. Basically when you refresh, the content randomises.
So far I have managed to randomise images on load with similar code(Random Images on page load), but for some reason when attempting this for html it doesn't inject the data where I am saying for it to go, as when you refresh the page different areas populate with different text. When pasting into console to text it just lists out the object array. If you could point out where I have gone wrong that would be great. HTML and Script is below.
var text_boxes = [{
number: "2",
sub_title: "Marketers",
}, {
number: "75%",
sub_title: "Average sales increase",
}, {
number: "4",
sub_title: "Developers",
}, {
number: "6",
sub_title: "Full Time",
}, {
number: "45",
sub_title: "Sites Launched",
}, {
number: "2",
sub_title: "Marketers",
}];
var arr3 = [];
$.each(text_boxes,
function(i, el) {
setTimeout(function() {
arr3.push(el);
if (arr3.length === text_boxes.length) {
$(".item").hasClass(".text", function(i) {
$(this).next('.has-text').find('.number span').text(arr3[i].number);
$(this).next('.has-text').find('.sub-title span').text(arr3[i].sub_title);
});
}
}, 1 + Math.floor(Math.random() * 5));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item small has-text small-offset-large">
<div class="inner">
<a href="" class="">
<div class="text">
<div class="title number">
<span>2</span>
</div>
<div class="sub-title">
<span>Marketers</span>
</div>
</div>
</a>
</div>
</div>
<div class="item small small secondary has-text test">
<div class="inner">
<a href="" class="">
<div class="text">
<div class="title">
<span>Test</span>
</div>
<div class="sub-title">
<span>Test</span>
</div>
</div>
</a>
</div>
</div>
I hope this help you. For me is not clear what is your goal.
var text_boxes = [{
number: "2",
sub_title: "Marketers",
}, {
number: "75%",
sub_title: "Average sales increase",
}, {
number: "4",
sub_title: "Developers",
}, {
number: "6",
sub_title: "Full Time",
}, {
number: "45",
sub_title: "Sites Launched",
}, {
number: "2",
sub_title: "Marketers",
}];
$.each($(".item"), function() {
var $item = $(this);
$.each(text_boxes, function(i, el) {
setTimeout(function() {
if($item.find('div.text').length) {
$item.find('.number span').text(text_boxes[i].number);
$item.find('.sub-title span').text(text_boxes[i].sub_title);
}
}, i * 1000);
});
});
div.item {
margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item small has-text small-offset-large">
<div class="inner">
<a href="" class="">
<div class="text">
<div class="title number">
<span>2</span>
</div>
<div class="sub-title">
<span>Marketers</span>
</div>
</div>
</a>
</div>
</div>
<div class="item small has-text small-offset-large">
<div class="inner">
<a href="" class="">
<div class="text">
<div class="title number">
<span>2</span>
</div>
<div class="sub-title">
<span>Marketers</span>
</div>
</div>
</a>
</div>
</div>
<div class="item small has-text small-offset-large">
<div class="inner">
<a href="" class="">
<div class="text">
<div class="title number">
<span>2</span>
</div>
<div class="sub-title">
<span>Marketers</span>
</div>
</div>
</a>
</div>
</div>

ng-repeat multiple times in Angularjs

I have this JSON
{
"Industrial Visits to L&T Construction Equipment Limited":
[
"1467970539_789007_2014.jpg",
"1467970539_644015.jpg",
"1467970539_238317.png",
"1467970539_946963.png"
],
"Industrial Visits to Titan":
[
"1467968484_995138.png",
"1467968226_987063.jpg",
"1467968226_210302.jpg",
"1467969523_721853.jpg"
]
}
I have to print title and its related images under that title on an HTML page.
I'm doing this:
<div ng-repeat="item in indusvisitlist">
<div ng-repeat="(key, value) in item">
<h3>{{key}}</h3>
<p class="col-md-6 col-sm-6" ng-repeat="image in value">
<img src="files/{{image}}" class="img-responsive img-thumbnail" />
</p>
</div>
</div>
I found this solution on another Stack overflow question. But it is not printing anything but
0
1
2
3
0
1
2
3
Can somebody please figure out where the problem might be. Thanks.
maybe you should try:
<div ng-repeat="(key, value) in indusvisitlist">
<h3>{{key}}</h3>
<p class="col-md-6 col-sm-6" ng-repeat="image in value">
<img ng-src="files/{{image}}" class="img-responsive img-thumbnail" />
</p>
</div>

Nested ng-repeat with AngularJS

I cannot seem to get out the values I need from a nested ng-repeat in AngularJS.
I have the following data sent from the server:
[{"Your Turn":[{"gameToken":"sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0","friendId":"522eec17e4b088a0a939cfdb","friendName":"Michelle","status":"You are waiting for Michelle Miguelamimio Agoramarketomercado to accept your challenge"}]},{"Their Turn":[{"gameToken":"sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0","friendId":"522eec17e4b088a0a939cfdb","friendName":"Michelle Miguelamimio Agoramarketomercado","status":"You are waiting for Michelle to accept your challenge"}]}]
And the following template for the HTML:
<div ng-repeat="turn in data">
<p>{{turn}}</p>
<ul class="list-bare list-inline tab-group">
<li ng-repeat="(key, value) in turn" class="tab tab-active txt-upper {{key | lowercase}}">{{key}}</li>
</ul>
<ul class="list-bare list-users clearfix">
<li class="clearfix" ng-repeat="game in turn">
<div class="avatar-container">
<img class="avatar" ng-src="{{baseUrl}}/shobo/user/avatar/{{game.friendId}}" alt="{{game.friendName}}" />
</div>
<div class="list-users-info">
<h3 class="text-cap">{{game.friendName}}</h3>
<p>{{game.status}}</p>
</div>
<div class="list-users-status txt-center" ng-click="acceptChallenge(game.gameToken,game.friendId)">
<div><i class="icon-chevron-right"></i></div>
</div>
</li>
</ul>
</div>
I am not seeing any of the 'game' values being output from the second ng-repeat and am not sure what i am doing wrong?
<li class="clearfix" ng-repeat="game in turn">
should be
<li class="clearfix" ng-repeat="game in value">
need to make some changes in data and html to make require html
$scope.data=[{
"Title":"Your Turn",
"Turn": [{
"gameToken":"sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0",
"friendId": "522eec17e4b088a0a939cfdb",
"friendName": "Michelle",
"status": "You are waiting for Michelle Miguelamimio Agoramarketomercado to accept your challenge"
}]
}, {
"Title":"Their Turn",
"Turn": [{
"gameToken": "sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0",
"friendId": "522eec17e4b088a0a939cfdb",
"friendName": "Michelle Miguelamimio Agoramarketomercado",
"status": "You are waiting for Michelle to accept your challenge"
}]
}];
HTML
<div ng-repeat="turn in data">
<ul class="list-bare list-users clearfix">
<h1>{{turn.Title}}</h1>
<li class="clearfix" ng-repeat="game in turn.Turn">
<div class="avatar-container">
<img class="avatar" ng-src="{{baseUrl}}/shobo/user/avatar/{{game.friendId}}" alt="{{game.friendName}}" />
</div>
<div class="list-users-info">
<h3 class="text-cap">{{game.friendName}}</h3>
<p>{{game.status}}</p>
</div>
<div class="list-users-status txt-center" ng-click="acceptChallenge(game.gameToken,game.friendId)">
<div><i class="icon-chevron-right"></i></div>
</div>
</li>
</ul>
</div>
please refer below fiddle
http://jsfiddle.net/U3pVM/1476/

Categories