I am pretty new to AngularJS so my apologies in that there are probably several concepts I am missing.
I'd like to take the following multi-level JSON string and parse/repeat the LastName elements.
Here is my attempt to do so with HTML / Javascript.
HTML
<!doctype html>
<html ng-app="nameApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="jsonGrab">
<hr>
<h1># of Records {{output}}</h1>
<ul>
<li data-ng-repeat="attribute in output.attributess"> {{attributes.LastName}}</li>
</ul>
</div>
</body>
</html>
Javascript
var nameApp = angular.module('nameApp',[]);
nameApp.controller('jsonGrab', function ($scope) {
// Comment
$scope.output = '[{
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXuAAP"
},
"Email": "rose#edge.com",
"FirstName": "Rose",
"Id": "003o000000BTRXuAAP",
"LastName": "Gonzalez"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXvAAP"
},
"Email": "sean#edge.com",
"FirstName": "Sean",
"Id": "003o000000BTRXvAAP",
"LastName": "Forbes"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXwAAP"
},
"Email": "jrogers#burlington.com",
"FirstName": "Jack",
"Id": "003o000000BTRXwAAP",
"LastName": "Rogers"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXxAAP"
},
"Email": "pat#pyramid.net",
"FirstName": "Pat",
"Id": "003o000000BTRXxAAP",
"LastName": "Stumuller"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXyAAP"
},
"Email": "a_young#dickenson.com",
"FirstName": "Andy",
"Id": "003o000000BTRXyAAP",
"LastName": "Young"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRXzAAP"
},
"Email": "barr_tim#grandhotels.com",
"FirstName": "Tim",
"Id": "003o000000BTRXzAAP",
"LastName": "Barr"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY0AAP"
},
"Email": "bond_john#grandhotels.com",
"FirstName": "John",
"Id": "003o000000BTRY0AAP",
"LastName": "Bond"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY1AAP"
},
"Email": "spavlova#uog.com",
"FirstName": "Stella",
"Id": "003o000000BTRY1AAP",
"LastName": "Pavlova"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY2AAP"
},
"Email": "lboyle#uog.com",
"FirstName": "Lauren",
"Id": "003o000000BTRY2AAP",
"LastName": "Boyle"
}, {
"attributes": {
"type": "Contact",
"url": "/services/data/v32.0/sobjects/Contact/003o000000BTRY3AAP"
},
"Email": "b.levy#expressl&t.net",
"FirstName": "Babara",
"Id": "003o000000BTRY3AAP",
"LastName": "Levy"
}]';
Result: # of Records 1937
Shows the number of characters (I think) instead of the number of records returned and the unordered list is not displaying.
Look at the code:
$scope.output = '[{ ... }]';
So, output is a variable of type string. It's not an array. If you want an array, it should be
$scope.output = [{ ... }];
But then, the code would still be wrong:
<li data-ng-repeat="attribute in output.attributess">
{{attributes.LastName}}
</li>
output is an array. It doesn't have any attributess field. So it should be
<li data-ng-repeat="element in output">
{{ element.attributes.LastName }}
</li>
Related
I know how to print this in Angular from a local jsonFile:
[{
"Firstname": "Steve",
"Lastname": "Jansson"
},
{
"Firstname": "Kurt",
"Lastname": "Nilsson"
},
{
"Firstname": "Lisa",
"Lastname": "Andersson"
}]
This is is how it looks when im printing it out
<p> List!</p>
<ul>
<li *ngFor="let adress of arrAdressbook; let i = index">{{adress.Firstname}} {{adress.Lastname}} </li>
</ul>
But how do I do if I want to print the following?
{
"Adressbook": [{
"Firstname": "Steve",
"Lastname": "Jansson",
"Adress": [{
"Street": "Hollowroad 17",
"City": "Sidney"
}]
},
{
"Firstname": "Kurt",
"Lastname": "Nilsson",
"Adress": [{
"Street": "Asbroad 14",
"City": "Canberra"
}]
},
{
"Firstname": "Lisa",
"Lastname": "Andersson",
"Adress": [{
"Street": "kangahoop 14",
"City": "Bunberry"
}]
}
]
}
Any help would be much appreciated!
Cheers! //Mcgajver
Much easier than you think. Use angular json pipe https://angular.io/api/common/JsonPipe
<pre>{{ data | json }}</pre>
Im trying to reorder my results (JSON file) based on the title of my contacts.
The initial render is working fine, showing the results of the JSON file in the order they are in the JSON file.
When i change the select dropdown, i expect it to update the .map function (line 143) that is rendering out the results of the JSON.
What is happening is nothing. no change, no errors, just the select dropdown option changed to the selected value.
Not really sure why its not working, spent a few hours trying to debug, bet its something really simple I'm missing.
Any help would be greatly appreciated as I'm lost on what the problem is..
var getContactList = [
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"job": "Manager",
"email": "Sincere#april.biz",
"phone": "1-770-736-8031 x56442",
"website": "http://www.hildegard.org",
"company": "Romaguera-Crona"
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"job": "CEO",
"email": "Shanna#melissa.tv",
"phone": "010-692-6593 x09125",
"website": "http://www.anastasia.net",
"company": "Deckow-Crist"
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"job": "Manager",
"email": "Nathan#yesenia.net",
"phone": "1-463-123-4447",
"website": "http://www.ramiro.info",
"company": "Romaguera-Jacobson"
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"job": "Store Clerk",
"email": "Julianne.OConner#kory.org",
"phone": "493-170-9623 x156",
"website": "http://www.kale.biz",
"company": "Robel-Corkery"
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"job": "Store Clerk",
"email": "Lucio_Hettinger#annie.ca",
"phone": "(254)954-1289",
"website": "http://www.demarco.info",
"company": "Keebler LLC"
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"job": "Store Clerk",
"email": "Karley_Dach#jasper.info",
"phone": "1-477-935-8478 x6430",
"website": "http://www.ola.org",
"company": "Considine-Lockman"
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"job": "Manager",
"email": "Telly.Hoeger#billy.biz",
"phone": "210.067.6132",
"website": "http://www.elvis.io",
"company": "Johns Group"
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"job": "Store Clerk",
"email": "Sherwood#rosamond.me",
"phone": "586.493.6943 x140",
"website": "http://www.jacynthe.com",
"company": "Abernathy Group"
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"job": "Store Clerk",
"email": "Chaim_McDermott#dana.io",
"phone": "(775)976-6794 x41206",
"website": "http://www.conrad.com",
"company": "Yost and Sons"
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"job": "Store Clerk",
"email": "Rey.Padberg#karina.biz",
"phone": "024-648-3804",
"website": "http://www.ambrose.net",
"company": "Hoeger LLC"
}
];
const App = React.createClass({
getInitialState: function() {
return {
orderSelect: ''
};
},
change: function(e) {
this.setState({
orderSelect: e.target.value
});
},
render: function() {
var contactsData = this.props.items,
orderSelect = this.state.orderSelect.trim().toLowerCase();
if (String(orderSelect) == "asc") {
contactsData.sort(function(a, b) {
return a.name.toLowerCase() > b.name.toLowerCase();
})
} else if (String(orderSelect) == "desc") {
contactsData.sort(function(a, b) {
return a.name.toLowerCase() < b.name.toLowerCase();
})
} else if (String(orderSelect) == "submitted") {
contactsData = getContactsList
}
return(
<div>
<select onChange={this.change} value={this.state.orderSelect}>
<option value="" disabled=""> Sort by </option>
<option value="submitted"> Submitted Date </option>
<option value="asc"> A - Z </option>
<option value="desc"> Z - A </option>
</select>
{
contactsData.map(function(l, index) {
return (
<div key={index}>
{l.name}
</div>
)
})
}
</div>
);
}
});
ReactDOM.render(
<App items={getContactList} />,
document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<div id="app"></div>
Did you get your answer on this? This is my solution, I hope it helps.
getContactList
.sort(
({ job: prevOr }, { job: curOr }) => prevOr - curOr
)
.map((slider) => (
<SliderItem key={slider.order} slider={slider} />
))
I would create then a ternary, if the value is A - Z the this one, if is Z - A then this code but with curOr - prevOr.
I'm having the hardest time figuring out how to display the following JSON file in my Angularjs repeat.
for the following JSON results, I thought I could simply display the title in an ng-repeat with the following:
<div ng-repeat="x in results">
{{x.data[0].title}}
</div>
But I'm not seeing results.
Here is the JSON:
{
"data": [
{
"id": 1,
"title": "Temp Title",
"description": "Temp Description",
"created_at": {
"date": "2016-03-15 07:10:17.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"updated_at": {
"date": "2016-03-15 07:10:17.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"user": {
"data": {
"id": 29,
"displayName": "chris.nakea",
"email": "chris.nakea#freshconsulting.com",
"join_date": 1458025279,
"profile": {
"data": {
"id": 29,
"displayName": "chris.nakea",
"avatar": null,
"firstName": null,
"lastName": null,
"bio": null,
"city": null,
"zipcode": null,
"state": null,
"country": null,
"latitude": null,
"longitude": null,
"avatars": {
"data": [
{
"id": "default_avatar.png",
"filename": "default_avatar.png",
"url": "https://cdn.band.dev/common/images/common/default_avatar.png",
"created_at": {
"date": "2016-03-15 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"images": {
"small": "https://cdn.band.dev/common/images/common/default_avatar_small.png",
"medium": "https://cdn.band.dev/common/images/common/default_avatar_medium.png",
"large": "https://cdn.band.dev/common/images/common/default_avatar_large.png"
}
}
]
},
"coverPhotos": {
"data": []
}
}
}
}
},
"category": {
"data": {
"id": 2,
"name": "Staff / Events",
"description": "Staff / Events",
"colorCode": "#242156",
"iconName": "icon-staff-events",
"iconCharacterCode": "c108"
}
},
"attachments": {
"data": [
{
"id": "1d3f96e2286c27ee599c9e49a0c33da0",
"filename": "man.jpg",
"url": "https://api.band.dev/v1/file/1d3f96e2286c27ee599c9e49a0c33da0",
"created_at": {
"date": "2016-03-15 07:10:17.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"images": {
"small": "https://api.band.dev/v1/file/50af58b3d52d8629e9f5c4d0dcdd5181",
"medium": "https://api.band.dev/v1/file/51535d38f7b3cd82313eac2414059d83",
"large": "https://api.band.dev/v1/file/a7be1dada18e4041cf48aea377cafa29"
}
}
]
}
},
{
"id": 2,
"title": "Temp Title",
"description": "Temp Description",
"created_at": {
"date": "2016-03-15 07:12:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"updated_at": {
"date": "2016-03-15 07:12:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"user": {
"data": {
"id": 29,
"displayName": "chris.nakea",
"email": "chris.nakea#freshconsulting.com",
"join_date": 1458025279,
"profile": {
"data": {
"id": 29,
"displayName": "chris.nakea",
"avatar": null,
"firstName": null,
"lastName": null,
"bio": null,
"city": null,
"zipcode": null,
"state": null,
"country": null,
"latitude": null,
"longitude": null,
"avatars": {
"data": [
{
"id": "default_avatar.png",
"filename": "default_avatar.png",
"url": "https://cdn.band.dev/common/images/common/default_avatar.png",
"created_at": {
"date": "2016-03-15 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"images": {
"small": "https://cdn.band.dev/common/images/common/default_avatar_small.png",
"medium": "https://cdn.band.dev/common/images/common/default_avatar_medium.png",
"large": "https://cdn.band.dev/common/images/common/default_avatar_large.png"
}
}
]
},
"coverPhotos": {
"data": []
}
}
}
}
},
"category": {
"data": {
"id": 2,
"name": "Staff / Events",
"description": "Staff / Events",
"colorCode": "#242156",
"iconName": "icon-staff-events",
"iconCharacterCode": "c108"
}
},
"attachments": {
"data": [
{
"id": "a93cf8df7b60686e7ca6884d0ce353c8",
"filename": "man2.jpg",
"url": "https://api.band.dev/v1/file/a93cf8df7b60686e7ca6884d0ce353c8",
"created_at": {
"date": "2016-03-15 07:12:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"images": {
"small": "https://api.band.dev/v1/file/cd04551395a355f4792fb85833156741",
"medium": "https://api.band.dev/v1/file/4ff543cd8f5055bfecd703dedaee6d87",
"large": "https://api.band.dev/v1/file/5cdd9a0c3650228e0b93f9c6cd1404df"
}
}
]
}
}
]
}
You can just remove the datap[0] part and get the output
<div ng-repeat="x in results.data">
{{x.title}}
</div>
Output:
Temp Title
Temp Title
if you want to filter then you can do it by
<div ng-repeat="x in results.data | filter: { id: '1' }">
{{x.title}}
</div>
Output:
Temp Title
<div ng-repeat="item in data">{{item.title}}</div>
And in your controller, bind the json to the scope.
$scope.data = jsonData.data;
Here's a fiddle for you - jsFiddle
<div ng-repeat="x in results.data">
{{x.title}}
</div>
https://jsfiddle.net/nvqf8oo7/6/
Thank you all for responding. I finally figured out that the reason I wasn't seeing anything was because I am using ui.bootstrap's modal and I was out of scope.
I resolved this by moving the ng-repeat out of the modal, but I could have also tried to work with the modal scope itself.
I'm trying to loop through a multi-dimensional array to get properties of products that are part of line items. They look basically like this: (I did a json_encode so it would be easier to read)
[{
"rcpt": "email#email.com",
"vars": [{
"name": "SYSTEM",
"content": "Bikes"
}, {
"name": "CUSTOMERSERVICE",
"content": "(855-553-4889)"
}, {
"name": "IMAGE",
"content": "http:\/\/www.url.com\/assets\/images\/chicago\/email\/dear_member.jpg"
}, {
"name": "LINKCOLOR",
"content": "#3db7e4"
}, {
"name": "FACEBOOK",
"content": "Bikes"
}, {
"name": "TWITTER",
"content": "Bikes"
}, {
"name": "INSTAGRAM",
"content": "Bikes"
}, {
"name": "CLOSING",
"content": "Greetings"
}, {
"name": "item",
"content": [{
"lineItem": 1,
"id": "3",
"name": "24-Hour Pass Gift Certificate",
"quantity": 2,
"nameShort": "24-Hour",
"type": "Gift Certificate",
"image": "24hour_blank.jpg",
"price": "9.95",
"total": "19.90",
"taxable": false,
"giftCertificates": {
"3204": {
"id": "3204",
"redemptionNumber": "xxxxx",
"type": "24-Hour"
},
"3205": {
"id": "3205",
"redemptionNumber": "xxxxx",
"type": "24-Hour"
}
}
}, {
"lineItem": 2,
"id": "1",
"name": "Annual Membership Gift Certificate",
"quantity": 2,
"nameShort": "Annual",
"type": "Gift Certificate",
"image": "annual_blank.jpg",
"price": "75.00",
"total": "150.00",
"taxable": false,
"giftCertificates": {
"892": {
"id": "892",
"redemptionNumber": "xxxxxx",
"type": "Annual"
},
"893": {
"id": "893",
"redemptionNumber": "xxxxx",
"type": "Annual"
}
}
}]
}, {
"name": "orderID",
"content": 1220
}, {
"name": "giftMessage",
"content": false
}, {
"name": "email",
"content": "email#email.com"
}, {
"name": "transactionDate",
"content": "12\/23\/2015"
}, {
"name": "transactionTime",
"content": "12:21 pm"
}, {
"name": "salesTaxTotal",
"content": 0
}, {
"name": "salesTaxRatePercent",
"content": "6.250"
}, {
"name": "TransactionAmount",
"content": "169.90"
}, {
"name": "account_number",
"content": "XXXX1111"
}, {
"name": "card_type",
"content": "Visa"
}, {
"name": "firstName",
"content": "tetete"
}, {
"name": "lastName",
"content": "tethuhhu"
}, {
"name": "address",
"content": "295 Place St"
}, {
"name": "city",
"content": "Brooklyn"
}, {
"name": "state",
"content": "NY"
}, {
"name": "zip",
"content": "11238"
}, {
"name": "country",
"content": "US"
}, {
"name": "phone",
"content": "8888888888"
}, {
"name": "transactionId",
"content": "xxxxxx"
}, {
"name": "shipToFirstName",
"content": "tetete"
}, {
"name": "shipToLastName",
"content": "tethuhhu"
}, {
"name": "shipToAaddress",
"content": "295 Place St"
}, {
"name": "shipToCity",
"content": "Brooklyn"
}, {
"name": "shipToState",
"content": "NY"
}, {
"name": "shipToZipCode",
"content": "11238"
}, {
"name": "ShipToCountry",
"content": "US"
}, {
"name": "ShipToCountry",
"content": "US"
}]
}]
So I am trying to get a print out of each gift certificate's type and redemption number. When I iterate through {{ giftCertificates }} like this:
{{#each giftCertificates}}
{{type}} {{redemptionNumber}}
{{/each}}
I get one of the line items but not the other. I'm guessing maybe it is being overwritten when it loops through again? But I have also tried to loop through {{ item }} and grab {{ giftCertificates.type }} and {{ giftCertificates.redemptionNumber }} and that does not work either. What is the correct way to get all of these from each line item?
Thanks for your help.
I know this is a very old question, but:
you can use {{this.proprietyName}} to get the type and number:
{{#each giftCertificates}}
{{this.892.type}}
{{/each}}
do not forget to add this to the mandrill message o
"merge": true,
"merge_language": "handlebars",
Also, the data structure is not ideal:
giftCertificates[
{
"id": "892",
"redemptionNumber": "xxxxxx",
"type": "Annual"
},
{
"id": "893",
"redemptionNumber": "xxxxxx",
"type": "Annual"
}
]
would be easier to handle.
I'm trying to figure out how to set a global-level array required in schema. My example JSON file is:
[
{
"firstname": "Paul",
"lastname": "McCartney"
},
{
"firstname": "John",
"lastname": "Lennon"
},
{
"firstname": "George",
"lastname": "Harrison"
},
{
"firstname": "Ringo",
"lastname": "Starr"
}
]
As seen above, I want the top-level structure to be an array, not an object. The schema I've got from jsonschema.net is (with slight modifications):
{
"$schema": "http://json-schema.org/draft-04/schema#",
"id": "/",
"type": "array",
"items": {
"id": "elements",
"type": "object",
"properties": {
"firstname": {
"id": "firstname",
"type": "string"
},
"lastname": {
"id": "lastname",
"type": "string"
}
},
"required": [
"firstname",
"lastname"
]
},
"required": [
"/"
]
}
But it fails with the jsonschema validator. Can you please help me with providing correct JSON schema for top-level array?
To be valid with your input data you just need following schema:
{
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "array",
"id": "http://jsonschema.net",
"items": {
"type": "object",
"properties": {
"firstname": {
"type": "string"
},
"lastname": {
"type": "string"
}
},
"required": [
"firstname",
"lastname"
]}
}