Angular display nested json value - 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="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>

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

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

How to bind foreign key kendo ui dropdownlist (with angular)

I am working with kendo UI and angular grid application. My grid is populated from JSON data (separate file) and I am use angular service:
My JSON data:
[
{ "Id": 1, "AccountNo": "10236", "PostingDate": "20.01.2015", "MaturityDate": "24.01.2015", "Description": "description1", "DocumentTypeId": 1 },
{ "Id": 2, "AccountNo": "10648", "PostingDate": "26.01.2015", "MaturityDate": "28.01.2015", "Description": "description2", "DocumentTypeId": 2 },
{ "Id": 3, "AccountNo": "10700", "PostingDate": "22.01.2015", "MaturityDate": "25.01.2015", "Description": "description3", "DocumentTypeId": 3 },
{ "Id": 4, "AccountNo": "10810", "PostingDate": "24.01.2015", "MaturityDate": "27.01.2015", "Description": "description4", "DocumentTypeId": 2 },
{ "Id": 5, "AccountNo": "10101", "PostingDate": "29.01.2015", "MaturityDate": "30.01.2015", "Description": "description5", "DocumentTypeId": 4 },
{ "Id": 6, "AccountNo": "10364", "PostingDate": "25.01.2015", "MaturityDate": "31.01.2015", "Description": "description6", "DocumentTypeId": 6 }
]
My Angular service:
angular.module("app").factory('myService', function ($http) {
return {
getAll: function (onSuccess, onError) {
return $http.get('/Scripts/app/data/json/master/masterGridData.js').success(function (data, status, headers, config) {
onSuccess(data);
}).error(function (data, status, headers, config) {
onError(data);
});
},
getDocumentTypes: function (onSuccess, onError) {
return $http.get('/Scripts/app/data/json/documentType.js').success(function (data, status, headers, config) {
onSuccess(data);
}).error(function (data, status, headers, config) {
onError(data);
});
}
}
});
This is my controller:
var app = angular.module("app", ["kendo.directives"]).controller("myController", function ($scope, myService) {
$scope.tabStrip = null;
$scope.$watch('tabStrip', function () {
$scope.tabStrip.select(0);
});
$scope.masterDataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
url = "/Scripts/app/data/json/master/masterGridData.js",
myService.getAll(function (data) {
options.success(data);
}).error(function (data) {
options.error(data);
})
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
AccountNo: { type: "string" },
PostingDate: { type: "string" },
MaturityDate: { type: "string" },
Description: { type: "string" },
DocumentTypeId: { type: "number" }
}
}
},
pageSize: 16
});
$scope.gridMaster = {
columns: [
{ field: "Id", hidden: true },
{ field: "AccountNo", title: "Account No", width: "77px", template: '<div style="text-align:left;">#= kendo.toString(AccountNo) #</div>' },
{ field: "PostingDate", title: "Posting Date", width: "70px" },
{ field: "MaturityDate", title: "Maturity Date" width: "70px" },
{ field: "Description", title: "Description", width: "170px" },
{ field: "DocumentTypeId", hidden: true }
],
dataSource: $scope.masterDataSource,
selectable: true,
filterable: true,
scrollable: true,
pageable: {
pageSize: 16,
//refresh: true,
pageSizes: ["50", "100", "200", "All"]
},
toolbar: [{
name: "create"
}],
change: function () {
var dataItem = this.dataItem(this.select());
$scope.isRowSelected = true;
$scope.id = dataItem.Id;
$scope.accountNumber = dataItem.AccountNo;
$scope.postingDate = dataItem.PostingDate;
$scope.description = dataItem.Description;
$scope.maturityDate = dataItem.MaturityDate;
$scope.documentTypeId = dataItem.DocumentTypeId;
}
};
$scope.documentType = {
dataSource: {
transport: {
read: function (options) {
url = "/Scripts/app/data/json/documentType.js",
myService.getDocumentTypes(function (data) {
options.success(data);
}).error(function (data) {
options.error(data);
});
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Name: { type: "string" }
}
}
}
},
dataTextField: "Name",
dataValueField: "Id"
}
});
This is my JSON which contain data for documentType:
[
{ "Id": 1, "Name": "Document 1" },
{ "Id": 2, "Name": "Document 2" },
{ "Id": 3, "Name": "Document 3" },
{ "Id": 4, "Name": "Document 4" },
{ "Id": 5, "Name": "Document 5" },
{ "Id": 6, "Name": "Document 6" }
]
And this is my HTML:
<html>
<head>
<!-- css and javaScript files -->
</head>
<body ng-app="app" ng-controller="myController">
<div class="divH3Style">
<h3 class="h3LabelForm">Grid Master</h3>
</div>
<div id="tabstrip" class="k-tabstrip-wrapper" data-kendo-tab-strip="tabStrip">
<ul>
<li>Overview</li>
<li>Update</li>
</ul>
<div id="tabstrip-1">
<div id="gridMaster" kendo-grid k-options="gridMaster" k-data-source="masterDataSource">
</div>
</div>
<div id="tabstrip-2" style="overflow: hidden">
<div id="tabStrip2Half1">
<div class="divHeightStyle">
<label for="accountNumber" class="labelTextSize">Account Number:</label>
<input id="accountNumber" type="number" class="k-textboxField" name="accountNumber" ng-model="accountNumber" placeholder="Account Number" />
</div>
<div class="datepickerStyle">
<label for="postingDate" class="labelTextSize">Posting Date:</label>
<input id="postingDate" class="k-datetimepickerMaster" name="postingDate" ng-model="postingDate" />
</div>
<div class="divHeightStyle">
<label for="desccription" class="labelTextSize">Description:</label>
<input id="desccription" type="text" class="k-textboxField" name="description" placeholder="Description" ng-model="description" />
</div>
<div class="datepickerStyle">
<label for="maturityDate" class="labelTextSize">Maturity Date:</label>
<input id="maturityDate" class="k-datetimepickerMaster" name="maturityDate" ng-model="maturityDate" />
</div>
</div>
<div id="tabStrip2Half2">
<div class="divHeightStyle">
<label for="documentType" class="labelTextSize">Document Type:</label>
<select kendo-drop-down-list
class="k-dropdownField" k-options="documentType"
ng-model="documentTypeId" ng-bind="documentTypeId"></select>
</div>
<div>
<button type="button" id="saveDataMasterGrid" class="k-button buttonSaveCancel" onclick="saveDataMasterGrid()">Save</button>
<button type="button" id="cancelDataMasterGrid" class="k-button buttonSaveCancel" onclick="cancelButtonMasterGrid()">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
In HTML I have dropdownlist which contain data for documentType and my dropdownlist is populated with JSON data. But, problem is in binding. When I select some grid row dropdownlist always display first item. My grid datasource contain foreign key value (documentTypeId) and this value should match with Id value from documentType JSON file, ie $scope.documentType property dataValueFiled value. How can bind this dropdownlist? Pls help..
For solve that problem I use hardCoded variable:
$scope.documentTypeDS = [
{ "value": 1, "text": "doc 1" },
{ "value": 2, "text": "doc 2" },
{ "value": 3, "text": "doc 3" },
{ "value": 4, "text": "doc 4" },
{ "value": 5, "text": "doc 5" },
{ "value": 6, "text": "doc 6" }
];
And modified definition for my gridMaster. In gridMaster column property I insert:
{ field: "DocumentTypeId", hidden: true, values: $scope.documentTypeDS },
And, In HTML i modified code lines, from this:
<select kendo-drop-down-list
class="k-dropdownField" k-options="documentType"
ng-model="documentTypeId" ng-bind="documentTypeId"></select>
to this:
<input kendo-drop-down-list k-data-text-field="'text'" k-data-value-field="'value'" data-bind="value:documentTypeId"
class="k-dropdownField" k-data-source="documentType" ng-readonly="isReadonly" ng-model="documentTypeId" />
I suppose that there is a better solution of this, because I use hardCoded part of code for define $scope.documentTypeDS.

Angular lowercase and replace spaces with dashes in json data

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>

Categories