Here is my data:
{
"statusCode": 200,
"result": {
"items": [
{
"Name": "date",
"Fields": {
"{3C3170EE-E6D5-4075-A864-8AB86D1E8E98}": {
"Name": "Promo Content",
"Value": "September 22, 2015"
}
}
},
{
"Name": "rate",
"Fields": {
"{3C3170EE-E6D5-4075-A864-8AB86D1E8E98}": {
"Name": "Promo Content",
"Value": "10%"
}
}
},
{
"Name": "description",
"Fields": {
"{3C3170EE-E6D5-4075-A864-8AB86D1E8E98}": {
"Name": "Promo Content",
"Value": "This rate is good as of the date listed above."
}
}
}
]
}
}
And here is my HTML and JS:
<body ng-app="myApp">
<div ng-controller="CallWebApi">
<ul>
<li ng-repeat="item in data">
{{ item.Name }}: {{ item.Fields["{3C3170EE-E6D5-4075-A864-8AB86D1E8E98}"].Value }}
</li>
</ul>
</div>
<script>
angular.module('myApp',[]).controller('CallWebApi', function($scope, $http) {
// Local version of the data
$http.get('./test.js').
success(function (data) {
$scope.data = data.result.items;
console.log('success ' + data)
})
.error(function(data) {
console.log('failure ' + data)
});
});
</script>
</body>
How would I write out the description with letters lower cased, and spaces replaced with dashes?
I'm expecting:
date: September 22, 2015
rate: 10%
description: this-rate-is-good-as-of-the-date-listed-above.
quertyking,
create a custom filter with
var str = text.replace(/\s+/g, '-');
return str.toLowerCase();
this jsfiddle does it
Use the JavaScript function replace("space", "underscore") and the lowercase filter to solve your problem.
<ul>
<li ng-repeat="item in data">
{{ item.Name }}: {{ item.Fields["{3C3170EE-E6D5-4075-A864-8AB86D1E8E98}"].Value.replace(" ","_") | lowercase }}
</li>
</ul>
Related
When I write {{ posts }} I see this object but when I want to display it in a v-for, it doesn't show up.
This is what I have by using {{ posts }}
{
"data": [
{
"id": 1,
"attributes": {
"title": "Post numer jeden",
"content": "tresc w poscie numer jeden",
"createdAt": "2022-10-27T17:51:40.396Z",
"updatedAt": "2022-10-27T17:51:44.406Z",
"publishedAt": "2022-10-27T17:51:44.405Z"
}
},
{
"id": 2,
"attributes": {
"title": "Post numer dwa",
"content": "Tresc w poscie numer dwa",
"createdAt": "2022-10-27T17:52:06.344Z",
"updatedAt": "2022-10-27T17:52:07.669Z",
"publishedAt": "2022-10-27T17:52:07.668Z"
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 2
}
}
}
<template>
<p>{{ posts }}</p>
<div v-for="post in posts" :key="post">
<hr />
<h3>{{ post.title }}</h3>
<p>dsdsa</p>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
posts: [],
};
},
async created() {
const res = await axios.get("http://localhost:1337/api/posts");
this.posts = res.data;
},
};
</script>
This is a common issue, solved by going one level down.
Try the following
<div v-for="post in posts.data" :key="post.id">
I'm accessing an API through JQuery/JSON. I can get the entire JSON block to display on a page using the following:
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
contentType: 'application/json',
headers: {'Access-Control-Allow-Origin': '*'},
beforeSend: function (xhr){
xhr.setRequestHeader('Authorization', 'Basic ' + btoa('un:pw'));
},
error: function(jqXHR, textStatus, data){
console.log("(1)Static error message");
console.log("(2)Output of textStatus " + textStatus);
console.log("(3)Output of data " + data);
},
success: function(data) {
var myData = data;
$('#myData').html('<p>'+ myData +'<p>')
}
})
However, when I try to access a key/value from that JSON, I get undefined. I think I'm not parsing the JSON correctly. Here's an example of some code I tried inside the success function:
$.each(myData.blockOne, function(data){
$('#myData').html('<p>'+ this.blockOne.id +'<p>')
});
Here's is an example of the JSON:
[
{
"ItemName": {
"id": "XYZ",
"caseNumber": "123"
},
"blockOne": [
{
"id": "ABC",
"subject": "321",
}
],
"blockTwo": [
{
"id": "EFG",
"subject": "456",
}
]
},
{
"ItemName": {
"id": "HIJ",
"caseNumber": "333"
},
"blockOne": [
{
"id": "JIL",
"subject": "999",
}
],
"blockTwo": [
{
"id": "OPE",
"subject": "778",
}
]
},
]
I'm trying to output something like the following:
Item
ID: XYZ
Case: 123
Block 1:
ID: ABC
Subject: 321
Block 2:
ID: EFG
Subject: 456
Item
ID: HIJ
Case: 333
Block 1:
ID: JIL
Subject: 999
Block 2:
ID: OPE
Subject: 778
Any help is greatly appreciated.
Inside $.each(), you need to loop through myData array instead of myData.blockOne because myData.blockOne returns only the data of the blockOne object.
var myData = [{
"ItemName": {
"id": "XYZ",
"caseNumber": "123"
},
"blockOne": [{
"id": "ABC",
"subject": "321",
}],
"blockTwo": [{
"id": "EFG",
"subject": "456",
}]
},
{
"ItemName": {
"id": "HIJ",
"caseNumber": "333"
},
"blockOne": [{
"id": "JIL",
"subject": "999",
}],
"blockTwo": [{
"id": "OPE",
"subject": "778",
}]
},
];
var html = "";
$.each(myData, function() {
html += `
<p>Item</p>
<p>ID :${this.ItemName.id}</p>
<p>Case :+${this.ItemName.caseNumber}</p>
<p>Block 1:</p>
<ul>
<li>ID :${this.blockOne[0].id}</li>
<li>Subject :${this.blockOne[0].subject}</li>
</ul>
<p>Block 2:</p>
<ul>
<li>ID :${this.blockTwo[0].id}</li>
<li>Subject :${this.blockTwo[0].subject}</li>
</ul>
`
});
$('#myData').html(html)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myData"></div>
I want to display the name and photoUrl in the HTML template of an Angular 6 app, how do I access the name and photoUrl elements only in the below array:
{
"key":"key0",
"value":[
{
"id":567657,
"name":"Jess",
"photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
"rating":30
},
{
"id":3243242,
"name":"Ryan",
"photoUrl":"https://d3iw72m71ie81c.cloudfront.net/male-29.jpg",
"rating":5
}
]
}
{
"key":"key1",
"value":[
{
"id":567657,
"name":"Jess",
"photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
"rating":30
},
{
"id":6757587,
"name":"Sarah",
"photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-70.jpg",
"rating":16
}
]
}
You can use *ngFor directive provided by Angular
.component.html
<div *ngFor="let user of users">
<div *ngFor="let value of values;i = index">
<div>{{value.name}}</div>
<div>{{value.photoUrl}}</div>
</div>
<div>
.component.ts
users = [
{
"key":"key0",
"value":[
{
"id":567657,
"name":"Jess",
"photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
"rating":30
},
{
"id":3243242,
"name":"Ryan",
"photoUrl":"https://d3iw72m71ie81c.cloudfront.net/male-29.jpg",
"rating":5
}
]
}.
{
"key":"key1",
"value":[
{
"id":567657,
"name":"Jess",
"photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
"rating":30
},
{
"id":6757587,
"name":"Sarah",
"photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-70.jpg",
"rating":16
}
]
}
]
Your JSON is not valid, however i made few adjustments
[ {
"key": "key0",
"value": [
{
"id": 567657,
"name": "Jess",
"photoUrl": "https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
"rating": 30
},
{
"id": 3243242,
"name": "Ryan",
"photoUrl": "https://d3iw72m71ie81c.cloudfront.net/male-29.jpg",
"rating": 5
}
] }, {
"key": "key1",
"value": [
{
"id": 567657,
"name": "Jess",
"photoUrl": "https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
"rating": 30
},
{
"id": 6757587,
"name": "Sarah",
"photoUrl": "https://d3iw72m71ie81c.cloudfront.net/female-70.jpg",
"rating": 16
}
] } ]
and you just need nested ngFor as follows,
<ul>
<li *ngFor="let group of myArray">
{{group.name}}
<ul>
<li *ngFor="let light of group.value">
<h1>Photo </h1> {{light.photoUrl}}
<h1>Name </h1> {{light.name}}
</li>
</ul>
</li>
</ul>
STACKBLITZ DEMO
component.ts
user_Array = [
{
"key":"key0",
"value":[
{
"id":567657,
"name":"Jess",
"photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
"rating":30
},
{
"id":3243242,
"name":"Ryan",
"photoUrl":"https://d3iw72m71ie81c.cloudfront.net/male-29.jpg",
"rating":5
}
]
}.
{
"key":"key1",
"value":[
{
"id":567657,
"name":"Jess",
"photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-50.jpeg",
"rating":30
},
{
"id":6757587,
"name":"Sarah",
"photoUrl":"https://d3iw72m71ie81c.cloudfront.net/female-70.jpg",
"rating":16
}
]
}
]
component.html
<div *ngFor="let user of user_Array">
<span>{{user?.name}}</span>
<img src="{{user?.photoUrl}}">
<div>
comment
by adding '?' html file will not generate error if that specific variable is not present.
it is always safe to add "?" while accessing ts variable
I am trying to filter my results on multiple checkboxes.
Here is my JSFIDDLE
How do i write dynamic ng-model for the checkboxes for the filter to take reflect?
function MainCtrl($scope) {
$scope.languages = [
{ name: 'persian', _id : 0 },
{ name: 'English', _id : 1 },
{ name: 'spanish', _id : 2 }
];
$scope.bu = [
{ name: 'A', _id : 1 },
{ name: 'B', _id : 2 },
{ name: 'C', _id : 3 },
{ name: 'D', _id : 4 },
{ name: 'E', _id : 5 }
];
$scope.array = [
{
"id": 910,
"language": {
"_id": "333",
"name": "Persian",
"abbreviation": "PE"
},
"business_unit": {
"_id": "2",
"name": "B"
}
},
{
"id": 909,
"language": {
"_id": "456",
"name": "English",
"abbreviation": "EN"
},
"business_unit": {
"_id": "3",
"name": "C"
}
},
{
"id": 908,
"language": {
"_id": "456",
"name": "Spanish",
"abbreviation": "SP"
},
"business_unit": {
"_id": "4",
"name": "D"
}
},
{
"id": 911,
"language": {
"_id": "343",
"name": "German",
"abbreviation": "GE"
},
"business_unit": {
"_id": "5",
"name": "E"
}
},
{
"id": 912,
"language": {
"_id": "696",
"name": "Russian",
"abbreviation": "RU"
},
"business_unit": {
"_id": "1",
"name": "A"
}
}]
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="MainCtrl">
<li ng-repeat="o in languages" ng-model="lang.language.name">
<input type="checkbox">
{{o.name}},
`</li>
<br><br><br>
<li ng-repeat="o in bu">
<input type="checkbox" ng-model="bu.business_unit.name">
{{o.name}},
`</li>
<br><br><br>
<div ng-repeat="arr in array filter : lang | filter : bu">
{{arr.language.name}} "and" {{arr.business_unit.name}}
</div>
<div>
You can use custom filter to achieve your goal:
custom fileter:
filter('myFilter', function() {
return function(items, search) {
var filterItems = {
search: search,
result: []
};
if (!search.needFilter) {
return items;
}
angular.forEach(items, function(value, key) {
if (this.search.language[value.language.name] === true || this.search.business_unit[value.business_unit.name] === true) {
this.result.push(value);
}
}, filterItems);
return filterItems.result;
};
})
HTML:
<p>Search by Language:</p>
<li ng-repeat="o in languages">
<input type="checkbox" ng-model="search.language[o.name]"> {{o.name}}
</li>
<p>Search by Unit:</p>
<li ng-repeat="o in bu">
<input type="checkbox" ng-model="search.business_unit[o.name]"> {{o.name}}
</li>
<p><b>Result:</b></p>
<div ng-repeat="arr in array | myFilter : search:false ">
{{arr.language.name}} "and" {{arr.business_unit.name}}
</div>
For more details see PLUNKER DEMO
Here is my data:
{
"statusCode": 200,
"result": {
"items": [
{
"Name": "date",
"Fields": {
"{3C3170EE-E6D5-4075-A864-8AB86D1E8E98}": {
"Name": "Promo Content",
"Value": "September 22, 2015"
}
}
},
{
"Name": "rate",
"Fields": {
"{3C3170EE-E6D5-4075-A864-8AB86D1E8E98}": {
"Name": "Promo Content",
"Value": "10%"
}
}
},
{
"Name": "description",
"Fields": {
"{3C3170EE-E6D5-4075-A864-8AB86D1E8E98}": {
"Name": "Promo Content",
"Value": "This rate is good as of the date listed above."
}
}
}
]
}
}
And here is my HTML and JS:
<body ng-app="myApp">
<div ng-controller="CallWebApi">
<ul>
<li ng-repeat="items in data">
{{ items.Name }}: {{ items.Fields }}
</li>
</ul>
</div>
<script>
angular.module('myApp',[]).controller('CallWebApi', function($scope, $http) {
// Local version of the data
$http.get('./test.js').
success(function (data) {
$scope.data = data.result.items;
console.log('success ' + data)
})
.error(function(data) {
console.log('failure ' + data)
});
});
</script>
</body>
My question is, how do I display the Value field nested in the Fields field?
I'm expecting:
date: September 22, 2015
rate: 10%
description: This rate is good as of the date listed above.
<ul>
<li ng-repeat="item in data">
{{ item.Name }}: {{ item.Fields["{3C3170EE-E6D5-4075-A864-8AB86D1E8E98}"].Value }}
</li>
</ul>