Angular lowercase and replace spaces with dashes in json data - javascript

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

Display data from object in Strapi

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">

Issues parsing JSON with JQuery/Ajax

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>

How to access items from array

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

filter multiple checkbox angular

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

Angular display nested json value

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>

Categories