I have a website that is mapping the products it is displaying from a JSON file. The JSON looks like this.
"litter3": [
{
"name": "Bates",
"description": "Cute",
"image": "./puppies/boo/bates.jpg"
},
{
"name": "Blade",
"description": "This one is fiesty",
"image": "./puppies/boo/blade.jpg"
},
{
"name": "Blair",
"description": "Cute",
"image": "./puppies/boo/blair.jpg"
},
And so on.
The page is mapping in the following way:
{litter1.map((litter1) => (
<div className="col-sm-4" key={litter1.name}>
<img
className="homecard frame"
src={litter1.image}
alt={litter1.name}
/>
<h1 className="puppyname">{litter1.name}</h1>
<p className="puppysubtitle">{litter1.description}</p>
</div>
))}
This is working as intended. However when the JSON data is empty there is an issue.
"litter4": [
{
"name": "",
"description": "",
"image": ""
},
{
"name": "",
"description": "",
"image": ""
},
Ideally I want my client to be able to have these already formatted pieces of code that she can fill in when necessary, and leave blank when not necessary.
The issue is when the data is not there the page will still map the images.
How do I prevent this from happening when the data is not provided?
Is this possible, or is there another way to accomplish this?
Link to github repo
Thank you in advance for your help.
You can simply do a filter to the array before doing the map
litter1.filter(x=>x.title!=='').map((litter1) => (
You can have other conditions as well.
Related
I receive with my ajax post request a message with values to display. This json response message looks like this:
{
"line": {
"name": "Google item",
"images": {
"element": {
"order": "1",
"link": "https://google.com/1.jpg",
"name": "1.jpg"
},
"element": {
"order": "2",
"link": "https://google.com/2.jpg",
"name": "2.jpg"
},
"element": {
"order": "3",
"link": "https://google.com/3.jpg",
"name": "3.jpg"
},
"element": {
"order": "4",
"link": "https://google.com/4.jpg",
"name": "4.jpg"
},
"element": {
"order": "5",
"link": "https://google.com/5.jpg",
"name": "5.jpg"
}
},
"features": {
"element": {
"name": "1",
"order": "1"
},
"element": {
"name": "2",
"order": "2"
},
"element": {
"name": "3",
"order": "3"
},
"element": {
"name": "4",
"order": "4"
}
},
"purchasing_price": "10",
"selling_price": "20",
"ftp_path": "google/item",
"description": ""
}
}
I'm in development and have not so much experience with json in jquery/ajax.
I tried this:
function parseContent(content){
$("#name").val(content.line.name);
$("#ftp_path").val(content.line.ftp_path);
$("#html_description").val(content.line.description);
$("#feature").remove();
$.each(content.line.features, function(k, v){
$("#features").append('<input type="text" class="form-control mt-3" id="feature" value="' + v.name + '" required>');
alert(v.name );
});
}
My problem is, the variable content contains just the last image und feature element. But in chrome/network I could see, the complete message has been received.
So I found out there is a parsing issue: Parsed JSON contains only the last element.
But how can I fix this in my case, to iterate through all elements?
The JSON specification says:
The names within an object SHOULD be unique.
The names in those objects are not.
SHOULD means:
that there
may exist valid reasons in particular circumstances to ignore a
particular item, but the full implications must be understood and
carefully weighed before choosing a different course.
The implications here are that every JSON parser (that I'm aware of at least) will ignore all but one of the values with duplicate names in an object.
If you really need to deal with that data then you are going to have to either track down a parser which can handle it (I'm not aware of any) or write a custom JSON parser which can (you'll also need to decide what data structure you want to generate from it because JS can't have duplicate property names in objects either). There are a number of JSON parsers on npm you might want to examine the source code of as a starting point.
A better solution would be to change whatever is generating the source data to produce a sensible format that doesn't violate a SHOULD requirement. Replacing the duplicate property names with an array for example.
I am trying to create a SharePoint ListItem using Microsoft Graph.
The methods I use to POST/PATCH ListItems are working unless I apply these methods to a list that contain objects (like Groups, Users or even Images).
In my examples, I'll be posting, patching or getting from /beta/sites/root/lists/1231231231234/items/4/fields.
SharePoint ListItem
{
"#odata.context":
"https://graph.microsoft.com/beta/$metadata#sites('root')/lists('1234123412341234')/items('4')/fields/$entity",
"#odata.etag": "\"123412341234,18\"",
"Title": "Test Title",
"description": "Some random description",
"assignedGroups": [
{
"LookupId": 7818,
"LookupValue": "7818",
"Email": "DemoGroep#12341234.onmicrosoft.com"
},
{
"LookupId": 7822,
"LookupValue": "7822",
"Email": "TestDemo#12341234.onmicrosoft.com"
}
],
"startDate": "2018-05-15T07:00:00Z",
"endDate": "2018-08-18T07:00:00Z",
"alwaysAvailable": false,
"id": "4",
"ContentType": "Item",
"Modified": "2018-05-17T13:27:21Z",
"Created": "2018-04-03T09:34:49Z",
"AuthorLookupId": "7688",
"EditorLookupId": "5222",
"_UIVersionString": "1.0",
"Attachments": false,
"Edit": "",
"LinkTitleNoMenu": "Test123123",
"LinkTitle": "Test123123",
"ItemChildCount": "0",
"FolderChildCount": "0",
"_ComplianceFlags": "",
"_ComplianceTag": "",
"_ComplianceTagWrittenTime": "",
"_ComplianceTagUserId": "",
"AppEditorLookupId": "25"
}
Working example (Note: This works because I update a simple field like 'Title' which is of type String)
{
Title: "SomeNewTitle"
}
Not working Example (returns 400 'The request is malformed or incorrect.')
{
assignedGroups: [{"Email": "Test1003#12341234o.onmicrosoft.com"}]
}
I tried multiple kinds of objects here but it never works.. even empty arrays (to clear group memberships) is returning 400 status.
I have a feeling that this is a limitation/bug in the Graph API
This is unfortunately a known issue with Microsoft Graph's SharePoint API. There is a UserVoice request to fix this, it could absolutely use more votes.
Try the PATCH body like this:
//PATCH
{
assignedGroups: {"Email": "Test1003#StichtingNuovo.onmicrosoft.com"}
}
Because in the listItem it is returning an array of assignedGroups but you are only updating one. If you needed to update multiple I believe the call would be:
//PATCH
{
assignedGroups: [{"Email": "Test1003#StichtingNuovo.onmicrosoft.com"},
{"Email": "AnotherEmail#microsoft.com"}
]
}
I have a workflow where I have audio content. I need to access for this content in other application (with javascript). I am trying with a GET method to this URL:
http://localhost:8086/alfresco/service/cmis/s/SpacesStore/i/1a7be6f8-0c50-4995-a211-1736642db06a/children?alf_ticket=TICKET_f9906d69befbc49668b92ddf372d62532a29ce7d
(In this URL, the id "1a7be6f8-0c50-4995-a211-1736642db06a" is the identificator of the package of the workflow task.)
But, the response is the next XML:
<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:app="http://www.w3.org/2007/app" xmlns:cmisra="http://docs.oasis-open.org/ns/cmis/restatom/200908/" xmlns:cmis="http://docs.oasis-open.org/ns/cmis/core/200908/" xmlns:alf="http://www.alfresco.org" xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/">
<author><name>admin</name></author>
<generator version="4.2.0 (r56674-b4848)">Alfresco (Community)</generator>
<icon>http://localhost:8086/alfresco/images/logo/AlfrescoLogo16.ico</icon>
<id>urn:uuid:1a7be6f8-0c50-4995-a211-1736642db06a-children</id>
<link rel="service" href="http://localhost:8086/alfresco/service/cmis"/>
<link rel="self" href="http://localhost:8086/alfresco/service/cmis/s/SpacesStore/i/1a7be6f8-0c50-4995-a211-1736642db06a/children?alf_ticket=TICKET_f9906d69befbc49668b92ddf372d62532a29ce7d"/>
<link rel="via" href="http://localhost:8086/alfresco/service/cmis/s/workspace:SpacesStore/i/1a7be6f8-0c50-4995-a211-1736642db06a"/>
<link rel="up" href="http://localhost:8086/alfresco/service/cmis/s/workspace:SpacesStore/i/13dd8d00-4ccd-4894-87fc-0b055cf41a4b/children" type="application/atom+xml;type=feed"/>
<link rel="down" href="http://localhost:8086/alfresco/service/cmis/s/workspace:SpacesStore/i/1a7be6f8-0c50-4995-a211-1736642db06a/descendants" type="application/cmistree+xml"/>
<link rel="http://docs.oasis-open.org/ns/cmis/link/200908/foldertree" href="http://localhost:8086/alfresco/service/cmis/s/workspace:SpacesStore/i/1a7be6f8-0c50-4995-a211-1736642db06a/tree" type="application/atom+xml;type=feed"/>
<title>1a7be6f8-0c50-4995-a211-1736642db06a Children</title>
<updated>2015-05-27T11:18:13.600-04:00</updated>
<opensearch:totalResults>0</opensearch:totalResults>
<opensearch:startIndex>0</opensearch:startIndex>
<opensearch:itemsPerPage>-1</opensearch:itemsPerPage>
<cmisra:numItems>0</cmisra:numItems>
</feed>
I don't know how to use this XML for my purpose. I need to hear the content (mp3 audio file) and modify its properties in my custom application.
Also I am trying with the next URL (GET):
http://localhost:8086/alfresco/service/api/node/content/workspace/SpacesStore/1a7be6f8-0c50-4995-a211-1736642db06a
But the result is: Web Script Status 404 - Not Found
How to retrieve a content of a workflow? There is some RESTful URL for this ?
Thanks for any help.
Greetings,
Pablo.
Finally, I resolve my questions using other RESTful URL. So, the steps to retrieve a content of a workflow is the next:
1. I get the package ID (this is a folder node) of the task of workflow:
GET /alfresco/service/api/task-instances/activiti$taskID
{
"data":
{
"id": "activiti$taskID",
"url": "api\/task-instances\/activiti$taskID",
"name": "wf:taskName",
"title": "Task for this",
"description": "Hello World !",
"state": "IN_PROGRESS",
"path": "api\/workflow-paths\/activiti$workflowID",
"isPooled": false,
"isEditable": true,
"isReassignable": true,
"isClaimable": false,
"isReleasable": false,
"outcome": null,
"owner":
{
"userName": "admin",
"firstName": "Admin",
"lastName": "istrator"
},
"properties":
{
"bpm_percentComplete": 0,
"bpm_description": "Hello World !",
"bpm_hiddenTransitions": [],
"bpm_package":"workspace:\/\/SpacesStore\/1a7be6f8-0c50-4995-a211-1736642db06a",
...........................................................
}
So, the package ID is: 1a7be6f8-0c50-4995-a211-1736642db06a
2. With the package ID, I get the content which I need of this package:
GET /alfresco/service/slingshot/node/workspace/SpacesStore/1a7be6f8-0c50-4995-a211-1736642db06a
.............................................
"children": [
{
"name": {
"name": "{http:\/\/www.alfresco.org\/model\/content\/1.0}grabacion1.mp3",
"prefixedName": "cm:grabacion1.mp3"
},
"nodeRef": "workspace://SpacesStore/9ed7905d-7017-40e9-9514-93244b0a9a6a",
"type": {
"name": "{http:\/\/www.alfresco.org\/model\/content\/1.0}content",
"prefixedName": "cm:content"
},
"assocType": {
"name": "{http:\/\/www.alfresco.org\/model\/bpm\/1.0}packageContains",
"prefixedName": "bpm:packageContains"
},
"primary": false,
"index": 0
}
],
.............................................
So, the content ID is: 9ed7905d-7017-40e9-9514-93244b0a9a6a
3. Finally, I get the content which I need:
GET /alfresco/service/api/node/content/workspace/SpacesStore/9ed7905d-7017-40e9-9514-93244b0a9a6a
If you need access to the properties of the content, you can use the URL of the step two with the content ID (in this example: 9ed7905d-7017-40e9-9514-93244b0a9a6a).
Greetings :)
So I managed to implement the user login facebook button on my website, and successfully get the books that the user likes on his personal facebook page, but this returns only the ID of the book and the name.
I was wondering if there is any way I could get more info about the object, like : what type of book is it ( SF, Action, For kids etc... ) or at least a photo for it, if there is any on facebook for it.
Any ideas on how I can manage to do this?
As a side note ( dunno if it will give any ideas for you guys ), I'm making an e-commerce website that after you login with your facebook account on the website I want to recommend those books that you liked/read on facebook, but I can only do that if I know them, and if the website doesn't have them I would like to make a new db entry with them, that's why I want to get more details about the item ( photo, gender etc.. )
The same I would like to apply even for movies and Songs.
Any ideas will be appreciated.
if you make a query with me/books, or v2.0/user_id/books, here's a sample result:
{
"category": "Book",
"name": "Atharva Veda",
"created_time": "2012-01-22T16:27:00+0000",
"id": "111018182244878"
},
{
"category": "Book",
"name": "Petronius' Satyricon",
"created_time": "2012-01-22T16:24:45+0000",
"id": "107943872570178"
},
{
"category": "Book",
"name": "De Brevitate Vitae",
"created_time": "2012-01-22T16:24:44+0000",
"id": "108092199212156"
},
{
"category": "Book",
"name": "Myth of Faraway Winds, an Ebook by Sarah S. Vati",
"created_time": "2012-08-20T23:26:20+0000",
"id": "390942770973133"
},
The category is, unfortunately, just "book" (I also see community pages or interests in the list of my books), but you have the book title. You can get a description with the book id, i.e., v2.0/book_id. If we want info about the book with id 390942770973133, we call the url v2.0/390942770973133, and here's the result:
{
"id": "390942770973133",
"about": "Myth of Faraway Winds is a special issue of Sarasvati Gallery's Art Catalogues, featuring the event \"Sarasvati Gallery in Atessa (Abruzzo, Italy)\".",
"can_post": true,
"category": "Book",
"checkins": 0,
"description": "Myth of Faraway Winds is a special issue of Sarasvati Gallery's Art Catalogues, featuring the event \"Sarasvati Gallery in Atessa (Abruzzo, Italy)\".",
"has_added_app": false,
"is_community_page": false,
"is_published": true,
"likes": 2,
"link": "http://www.smashwords.com/books/view/217352",
"name": "Myth of Faraway Winds, an Ebook by Sarah S. Vati",
"parking": {
"lot": 0,
"street": 0,
"valet": 0
},
"talking_about_count": 0,
"were_here_count": 0
}e_count": 0
}
You get the book cover at the following url: https://graph.facebook.com/BOOK_ID/picture, so, for the book above, it would be https://graph.facebook.com/390942770973133/picture (that's not a query, it's the url that redirects to the book picture. Put it in your browser to see it).
I have an object, simulating a Cassandra database, where I retrieve its data to display it on a AngularJs app. Unfortunately, I can't make a premade header for my array because the keys are subject to change, depending on the data I'll retrieve (Here's an example of what I'm talking about):
var columnFamilyData = {
"DocInfo": {
"4c58abf5": {
"name": "coucou",
"extension": "pdf",
"size": 8751,
"type": "facture",
"repository": "archive"
},
"8cd524d7a45de": {
"name": "gerard",
"extension": "xml",
"size": 48734,
"type": "compta",
},
"5486d684fe54a": {
"name": "splendide",
"extension": "tiff",
"type": "photos",
"METADATA_A": "jambon"
}
},
"Base": {
"BASE_A": {
"name": "BASE_A",
"description": "That base is truly outrageous, they are truly, truly outrageous",
"baseMetadata_1": "METADATA_A",
"baseMetadata_2": "METADATA_B",
"baseMetadata_3": "METADATA_C"
},
},
}
As you can see, the arrays in DocInfo and Base are different, data and keys.
What I want to do is being able to use my ng-repeat to create a <th> line with the key name (for instance, Extension, of METADATA_A), but only once, since ng-repeat may duplicate this information.
I'm also providing a JSFiddle, if it can help any of you to understand my goal.
Thanks for reading and/or answering, have a great day.
Question is not totally clear, but it seems like you want "(key, val) in object" syntax.
ng-repeat="(name, age) in {'adam':10, 'amalie':12}"