I am getting JSON array as response from external API which contains list of GIFs. Now I have the GIF URLs as part of this response which I want to show as images on Angular front end html page.
I tried iterating over the response using but that doesn't seem to work.
JSON response
0: {…}
analytics: Object { onload: {…}, onclick: {…}, onsent: {…} }
bitly_gif_url: "https://gph.is/YC1q17"
bitly_url: "https://gph.is/YC1q17"
content_url: ""
embed_url: "https://giphy.com/embed/6XeQfKBcO3K6c"
id: "6XeQfKBcO3K6c"
images: Object { fixed_height_still: {…}, original_still: {…}, fixed_width: {…}, … }
import_datetime: "1970-01-01 00:00:00"
is_sticker: 0
rating: "g"
slug: "hello-waving-movie-6XeQfKBcO3K6c"
source: ""
source_post_url: ""
source_tld: ""
title: "ryan gosling hello GIF"
trending_datetime: "2017-02-27 21:45:01"
type: "gif"
url: "https://giphy.com/gifs/hello-waving-movie-6XeQfKBcO3K6c"
username: ""
I just want the list of images (say 20) coming as response to be shown in row column mode in UI.
I got the actual GIF image URL by getting the complete JSON response details.
To display it simply calling the complete URL for the image,
<div class="gifs-card-container" *ngFor="let item of data">
<img src={{item.images.original.url}}>
</div>
Related
When adding parameters to a call to an OData endpoint in my application like this
https://localhost:12345/TestServer/RequestDto
?$count=true&$orderby=TimeStamp%20desc
&$filter=(Ownername%20eq%20%27Baggins%2C%20Frodo%27)
&$skip=0&$top=26&userID=bt0388&showByAuthor=False
the $filter seems to be getting ignored. userID and showByAuthor are the additional parameters.
The related endpoint looks like this.
public class RequestDtoController : ODataController
{
// ...
[EnableQuery]
public IQueryable<DocumentRequestDTO> Get(string userID, bool showByAuthor)
{
// ...
}
It does get called with proper parameters. The data it returns is correct and complete.
I expect the OData layer to apply the filter, but it doesn't. This is the final result set:
{#odata.context: "https://localhost:44393/DocServer2/$metadata#RequestDto", #odata.count: 4,…}
#odata.context: "https://localhost:44393/DocServer2/$metadata#RequestDto"
#odata.count: 4
value:
[{ID: "dc3a6999", AuthorID: "0388", Authorname: "Wonka, Willy",…},…]
0:
{ID: "dc3a6999", AuthorID: "0388", Authorname: "Wonka, Willy",…}
Ownername: "Wonka, Willy"
...
1:
{ID: "685b7e33", AuthorID: "Test-Owner", Authorname: "Test, Owner",…}
Ownername: "Wonka, Willy"
...
2: {ID: "8192d591", AuthorID: "0003", Authorname: "Hedgehog, Sonic",…}
Ownername: "Baggins, Frodo"
...
3: {ID: "b56b7cfc", AuthorID: "0003", Authorname: "Hedgehog, Sonic",…}
Ownername: "Baggins, Frodo"
...
How would I need to go about fixing it?
I want to add the clickable telephone numbers to a High Charts Organizational Chart.
The data for each text box looks like:
nodes: [{
id: 'CEO',
title: 'The Boss',
name: 'Jo Bloggs',
},{
I tried to escape the " marks with ' but that did not help, i.e.:
nodes: [{
id: 'CEO',
title: 'The Boss',
name: '<a href='tel: 123456'>Jo Bloggs</a>',
},{
Consider use the Unicode Character 'QUOTATION MARK' (U+0022) \u0022.
Example:
nodes: [{
id: 'CEO',
title: 'The Boss',
name: '<a href=\u0022tel: 123456\u0022>Jo Bloggs</a>',
},{
See working jsfiddle and check the value Employee - Torstein Hønsi:
Example:
{
id: 'CPO',
title: 'CPO',
name: '<a href=\u0022#\u0022>Employee - Torstein Hønsi</a>',
image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131213/Highsoft_03998_.jpg'
}
I am creating a react app and I am using Zomato api for restaurants. I was able to display the search results in the app and link to a single page with specific restaurant details. I wanted to fill up the single restaurant page with name, link to restaurant website, address, photo gallery, etc. I already have the rest of the info in the restaurant json. However. I couldn't find any info to link to the restaurant website. All I could find is several links to zomato page with info for the specific website and on this page, there's the link to the restaurant website...
Here's the specific restaurant json I got from zomato api:
R: {has_menu_status: {…}, res_id: 16935822}
all_reviews: {reviews: Array(3)}
all_reviews_count: 3
apikey: ""
average_cost_for_two: 30
book_again_url: ""
book_form_web_view_url: ""
cuisines: "Drinks Only"
currency: "$"
deeplink: "zomato://restaurant/16935822"
establishment: ["Lounge"]
events_url: "https://www.zomato.com/miami/blackbird-ordinary-downtown-miami/events#tabtop?utm_source=api_basic_user&utm_medium=api&utm_campaign=v2.1"
featured_image: "https://b.zmtcdn.com/data/reviews_photos/607/4edc23f93d257fbed50f184d8c920607_1503580424.png?fit=around%7C640%3A640&crop=640%3A640%3B%2A%2C%2A"
has_online_delivery: 0
has_table_booking: 0
highlights: (15) ["Credit Card", "Lunch", "Serves Alcohol", "Cash", "Dinner", "Live Music", "Outdoor Seating", "Live Entertainment", "Fullbar", "Valet Parking Available", "Indoor Seating", "Nightlife", "Wine", "Serves Cocktails", "Street Parking"]
id: "16935822"
include_bogo_offers: true
is_book_form_web_view: 0
is_delivering_now: 0
is_table_reservation_supported: 0
is_zomato_book_res: 0
location: {address: "729 SW 1st Avenue, Downtown Miami, Miami 33130", locality: "Downtown Miami", city: "Miami", city_id: 291, latitude: "25.7667186000", …}
menu_url: "https://www.zomato.com/miami/blackbird-ordinary-downtown-miami/menu?utm_source=api_basic_user&utm_medium=api&utm_campaign=v2.1&openSwipeBox=menu&showMinimal=1#tabtop"
mezzo_provider: "OTHER"
name: "Blackbird Ordinary"
offers: []
opentable_support: 0
phone_numbers: "(305) 671-3307"
photo_count: 34
photos: (4) [{…}, {…}, {…}, {…}]
photos_url: "https://www.zomato.com/miami/blackbird-ordinary-downtown-miami/photos?utm_source=api_basic_user&utm_medium=api&utm_campaign=v2.1#tabtop"
price_range: 3
switch_to_order_menu: 0
thumb: "https://b.zmtcdn.com/data/reviews_photos/607/4edc23f93d257fbed50f184d8c920607_1503580424.png?impolicy=newcropandfit&cropw=886&croph=886&cropoffsetx=169&cropoffsety=1&cropgravity=NorthWest&fitw=200&fith=200&fittype=ignore"
timings: "3 PM to 5 AM (Mon-Fri),5 PM to 5 AM (Sat-Sun)"
url: "https://www.zomato.com/miami/blackbird-ordinary-downtown-miami?utm_source=api_basic_user&utm_medium=api&utm_campaign=v2.1"
user_rating: {aggregate_rating: "3.3", rating_text: "Average", rating_color: "CDD614", rating_obj: {…}, votes: "14"}
__proto__: Object
I am begining to find out that I kinda don't like Zomato api, but it will take more time to switch over to something else....
I'm calling a web service in VB6 which returns a json string as response. I'm able to hold the response in a string. now I want to show the each parameter separately how can I extract the values from the string ?. a sample string is here :
{
"id": "22144",
"t" : "AAPL",
"e" : "NASDAQ",
"l" : "108.00",
"l_fix" : "108.00",
"l_cur" : "108.00",
"s": "2",
"ltt":"4:00PM EDT",
"lt" : "Aug 10, 4:00PM EDT",
"lt_dts" : "2016-08-10T16:00:01Z",
"c" : "-0.81",
"c_fix" : "-0.81",
"cp" : "-0.74",
"cp_fix" : "-0.74",
"ccol" : "chr",
"pcls_fix" : "108.81",
"el": "107.98",
"el_fix": "107.98",
"el_cur": "107.98",
"elt" : "Aug 10, 5:16PM EDT",
"ec" : "-0.02",
"ec_fix" : "-0.02",
"ecp" : "-0.02",
"ecp_fix" : "-0.02",
"eccol" : "chr",
"div" : "0.57",
"yld" : "2.11"
}
I've found VB-JSON works really well for parsing json in VB6.
You can download it from here.
VB-JSON: A Visual Basic 6 (VB6) JSON Parser Class Library
The .zip file that you download will contain a sample project and the library, which is called JSON.bas.
The main parser function is JSON.parse and you pass it the json string as parameter.
So in your project, you only need to include / add the JSON.bas file.
Sample Usage (from the sample project) :
Private Sub cmdObjToJSON_Click()
Dim p As Object
Dim sInputJson As String
sInputJson = "{ width: '200', frame: false, height: 130, bodyStyle:'background-color: #ffffcc;',buttonAlign:'right', items: [{ xtype: 'form', url: '/content.asp'},{ xtype: 'form2', url: '/content2.asp'}] }"
MsgBox "Input JSON string: " & sInputJson
' sets p
Set p = JSON.parse(sInputJson)
MsgBox "Parsed object output: " & JSON.toString(p)
MsgBox "Get Bodystyle data: " & p.Item("bodyStyle")
MsgBox "Get Form Url data: " & p.Item("items").Item(1).Item("url")
p.Item("items").Item(1).Add "ExtraItem", "Extra Data Value"
MsgBox "Parsed object output with added item: " & JSON.toString(p)
End Sub
As it applies to your case. Something like the following might work (with some tweaks if needed).
Dim parsedJsonObject As Object
Set parsedJsonObject = JSON.parse(yourJsonStringVariable)
'Print the ticker ( t in your json )
Debug.Print parsedJsonObject.Item("t")
There is a JSON parser library for Visual Basic that you can find in http://json.org/.
You can either use VB-JSON or PW.JSON.
I've looked at a few other related questions and I still can't seem to find what I'm looking for. This is an example JSON payload being sent to an API I'm writing:
{
"publishType": "Permitable",
"electricalPanelCapacity": 0.0,
"roofConstruction": "Standard/Pitched",
"roofType": "Composition Shingle",
"systemConstraint": "None",
"addedCapacity": 0.0,
"isElectricalUpgradeRequired": false,
"cadCompletedBy": "94039",
"cadCompletedDate": "2017-02-01T02:18:15Z",
"totalSunhourDeficit": 5.0,
"designedSavings": 5.0,
"isDesignedWithinTolerance": "N/A",
"energyProduction": {
"january": 322.40753170051255,
"february": 480.61501312589826,
"march": 695.35215022905118,
"april": 664.506907341219,
"may": 877.53769491124172,
"june": 785.56924358327,
"july": 782.64347308783363,
"august": 760.1123565793057,
"september": 574.67050827435878,
"october": 524.53797441350321,
"november": 324.31132291046379,
"december": 280.46921069200033
},
"roofSections": [{
"name": "North East Roof 4",
"roofType": "Composition Shingle",
"azimuth": 55.678664773137086,
"tilt": 15.0,
"solmetricEstimate": 510.42831656979456,
"shadingLoss": 14.0,
"systemRating": 580.0,
"sunHours": 0.88004882167205956,
"moduleCount": 2,
"modules": [{
"moduleRating": 290.0,
"isovaPartNumber": "CDS-MON-007070",
"partCount": 2
}]
}, {
"name": "South West Roof 3",
"roofType": "Composition Shingle",
"azimuth": 235.67866481720722,
"tilt": 38.0,
"solmetricEstimate": 3649.1643776261653,
"shadingLoss": 59.0,
"systemRating": 5220.0,
"sunHours": 0.69907363556056812,
"moduleCount": 18,
"modules": [{
"moduleRating": 290.0,
"isovaPartNumber": "CDS-MON-007070",
"partCount": 18
}]
}, {
"name": "South East Roof",
"roofType": "Composition Shingle",
"azimuth": 145.67866477313709,
"tilt": 19.0,
"solmetricEstimate": 2913.1406926526984,
"shadingLoss": 31.0,
"systemRating": 2900.0,
"sunHours": 1.0045312733285168,
"moduleCount": 10,
"modules": [{
"moduleRating": 290.0,
"isovaPartNumber": "CDS-MON-007070",
"partCount": 10
}]
}],
"SystemConfiguration": {
"inverters": [{
"isovaPartNumber": "ENP-INV-007182",
"partCount": 30
}]
}
}
Describing all the beginning parameters was easy.
/post/new-cad/{serviceNumber}:
post:
summary: Publish a new CAD record.
description: Creates a new CAD record under the provided service number and returns the name of the new CAD record, the unique SF ID, and the deep link URL for Salesforce.
parameters:
- name: serviceNumber
in: path
description: The service number for the solar project you're interested in publishing to.
required: true
type: string
- name: publishType
in: formData
description: The type of CAD record to publish (Proposal, Permitable, or AsBuilt).
required: true
type: string
- name: electricalPanelCapacity
in: formData
required: true
type: number
format: double
- name: roofConstruction
in: formData
description: New, Flat Roof, Open Beam, Standard/Pitched
required: true
type: string
- name: roofType
in: formData
description: Composition Shingle, Membrane (Rubber, TPO, PVC, EPDM), Metal - Corrugated (S-Curve), Metal - Standing Seam, Metal - Trapezoidal, Multi Roof Type, Rolled Comp, Silicone, Tar & Gravel, Tile - Flat, Tile - S-Curve, or Tile - W-Curve
type: string
- name: systemConstraint
in: formData
description: Usage, None, Roof, Electrical, Shading, or 10kW Max
required: true
type: string
- name: addedCapacity
in: formData
required: true
type: number
format: double
- name: isElectricalUpgradeRequired
in: formData
type: boolean
- name: cadCompletedBy
in: formData
description: Employee ID of record author.
type: number
required: true
- name: cadCompletedDate
in: formData
description: The date the CAD record was completed.
type: string
format: date
required: true
- name: totalSunhourDeficit
in: formData
type: number
format: double
- name: designedSavings
in: formData
type: number
format: double
- name: isDesignedWithinTolerance
in: formData
type: string
description: Yes, No, or N/A
And yields the expected result in Swagger-UI:
But now I'm struggling with the last parts of the example JSON payload above. I'm unsure how to express the energyProduction key which is an object with a key for each month of the year. I'm also unsure how to describe roofSections which is an array of objects and systemConfiguration which is an object with a property inverters whose value is an array of objects.
I'm going over the swagger documentation quite a bit but I'm still pretty confused and hoping maybe someone here can explain things a little better to me.
I figured it out. Turns out formData is not what I should have been using for my parameters. Instead I needed to use body and define the structure of the JSON that would populate the body. Here is the completed design file using a body parameter with an object schema and describes all the nested objects and arrays as well.
/new-cad/{serviceNumber}:
post:
summary: Publish a new CAD record.
description: Creates a new CAD record under the provided service number and returns the name of the new CAD record, the unique SF ID, and the deep link URL for Salesforce.
parameters:
- name: serviceNumber
in: path
description: The service number for the solar project you're interested in publishing to.
required: true
type: string
- name: cadData
in: body
description: A JSON payload containing the data required to publish a new CAD record.
required: true
schema:
type: object
properties:
publishType:
type: string
default: "Proposal"
enum: ["Proposal","Permitable","AsBuilt"]
electricalPanelCapacity:
type: number
roofConstruction:
type: string
default: "New"
enum: ["New","Flat Roof","Open Beam","Standard/Pitched"]
roofType:
type: string
enum: ["Composition Shingle","Membrane (Rubber, TPO, PVC, EPDM)","Metal - Corrugated (S-Curve)","Metal - Standing Seam","Metal - Trapezoidal","Multi Roof Type","Rolled Comp","Silicone","Tar & Gravel","Tile - Flat","Tile - S-Curve","Tile - W-Curve"]
systemConstraint:
type: string
default: "None"
enum: ["None","Usage","Roof","Electrical","Shading","10kW Max"]
addedCapacity:
type: number
default: 0
isElectricalUpgradeRequired:
type: boolean
cadCompletedBy:
type: string
cadCompletedDate:
type: string
totalSunhourDeficit:
type: number
designedSavings:
type: number
isDesignedWithinTolerance:
type: string
default: "N/A"
enum: ["N/A","Yes","No"]
energyProduction:
type: object
properties:
january:
type: number
february:
type: number
march:
type: number
april:
type: number
may:
type: number
june:
type: number
july:
type: number
august:
type: number
september:
type: number
october:
type: number
november:
type: number
december:
type: number
roofSections:
type: array
items:
type: object
properties:
name:
type: string
roofType:
type: string
enum: ["Composition Shingle","Membrane (Rubber, TPO, PVC, EPDM)","Metal - Corrugated (S-Curve)","Metal - Standing Seam","Metal - Trapezoidal","Multi Roof Type","Rolled Comp","Silicone","Tar & Gravel","Tile - Flat","Tile - S-Curve","Tile - W-Curve"]
azimuth:
type: number
tilt:
type: number
solmetricEstimate:
type: number
shadingLoss:
type: number
systemRating:
type: number
sunHours:
type: number
moduleCount:
type: integer
modules:
type: array
items:
type: object
properties:
moduleRating:
type: number
isovaPartNumber:
type: string
partCount:
type: integer
systemConfiguration:
type: object
properties:
inverters:
type: array
items:
type: object
properties:
isovaPartNumber:
type: string
partCount:
type: integer
tags:
- NEW-CAD
responses:
200:
description: CAD record created successfully.
schema:
type: object
properties:
cadName:
type: string
sfId:
type: string
sfUrl:
type: string
examples:
cadName: some name
sfId: a1o4c0000000GGAQA2
sfUrl: http://some-url-to-nowhere.com
204:
description: No project could be found for the given service number.
500:
description: Unexpected error. Most likely while communicating with Salesforce.
schema:
type: string
So now I can still get the serviceNumber from the path while everything else comes in the request body. One thing to keep in mind here is that you cannot use all the same Swagger Data Types. For example I tried to use double for one of the properties and Swagger complained that it couldn't parse type double. I was very confused until I finally found the section of the docs describing the difference between formData parameters and a body parameter (of which you can only have one, because it describes the entire request body). Basically you can only use data types that are supported by the JSON schema.
Swagger-UI now shows a single textarea instead of multiple input fields for each parameter. Not as pretty but it works great. You can click the "Example Value" box on the right and it places a predefined JSON template in the textarea for you so you can just fill in the values.
If you are just learning Swagger like I am I hope this helps!