We Keep Coding

reading output of API in react

I am calling one API in react. for that I am getting output in below format.
{
"first_page_uri": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages.json?PageSize=50&Page=0",
"end": 49,
"previous_page_uri": null,
"messages": [
{
"body": "",
"num_segments": "1",
"direction": "outbound-api",
"from": "+12058557185",
"date_updated": "Mon, 29 Aug 2022 09:07:47 +0000",
"price": "-0.04410",
"error_message": null,
"uri": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx.json",
"account_sid": "xxxxxxxxxxxxxxxxx",
"num_media": "0",
"to": "+919823772514",
"date_created": "Mon, 29 Aug 2022 09:07:42 +0000",
"status": "delivered",
"sid": "SMfa2e62cf71761db915657b02605bc689",
"date_sent": "Mon, 29 Aug 2022 09:07:43 +0000",
"messaging_service_sid": "xxxxxxxxxxxxxxxxx",
"error_code": null,
"price_unit": "USD",
"api_version": "2010-04-01",
"subresource_uris": {
"media": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx/Media.json",
"feedback": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx/Feedback.json"
}
},
{
"body": "",
"num_segments": "1",
"direction": "outbound-api",
"from": "+12058557185",
"date_updated": "Mon, 29 Aug 2022 05:51:57 +0000",
"price": "-0.04410",
"error_message": null,
"uri": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx.json",
"account_sid": "AC9ab9e25e89eaa96c474e9a39867bb2f3",
"num_media": "0",
"to": "+919823772514",
"date_created": "Mon, 29 Aug 2022 05:51:47 +0000",
"status": "delivered",
"sid": "SM5237fb62ff472b5e124fdd2ea073fffe",
"date_sent": "Mon, 29 Aug 2022 05:51:47 +0000",
"messaging_service_sid": "MG00d095919337aa95aeb5b74c8f0bd81c",
"error_code": null,
"price_unit": "USD",
"api_version": "2010-04-01",
"subresource_uris": {
"media": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx/Media.json",
"feedback": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx/Feedback.json"
}
},
{
"body": "",
"num_segments": "1",
"direction": "outbound-api",
"from": "+12058557185",
"date_updated": "Mon, 29 Aug 2022 05:24:09 +0000",
"price": "-0.04410",
"error_message": null,
"uri": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx.json",
"account_sid": "xxxxxxxxxxxxxxxxx",
"num_media": "0",
"to": "+919727930925",
"date_created": "Mon, 29 Aug 2022 05:24:05 +0000",
"status": "delivered",
"sid": "SM1528c06455368cfb7e00ab8283ed773c",
"date_sent": "Mon, 29 Aug 2022 05:24:05 +0000",
"messaging_service_sid": "MG00d095919337aa95aeb5b74c8f0bd81c",
"error_code": null,
"price_unit": "USD",
"api_version": "2010-04-01",
"subresource_uris": {
"media": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx/Media.json",
"feedback": "/2010-04-01/Accounts/xxxxxxxxxxxxxxxxx/Messages/xxxxxxxxxxxxxxxxx/Feedback.json"
}
}
,`
I want to read differnet fields on it to perform some operation in UI.
for example I want to read status, body, from etc.
alert("Message is:"+JSON.stringify(response.data))
this line is giving output of an API properly.
but when I write
alert("Message is:"+JSON.stringify(response.data.messages))
alert("Message is:"+JSON.stringify(response.data.messages.from))
alert("Message is:"+JSON.stringify(response.data.messages[0].from))
I am getting undefined and exceptions. my goal is to print the value in UI for specific status.
Can somrebody help me on that.
I tried lot of options and googling but nothing helped. I am new to javascript

Now this is a relatively complex topic for a beginner, let's start at the beginning.
Objects
What you get from the api request is an object. An object has properties, like first_page_uri, end, and so on. In JSON that will look like this:
{
"first_page_uri": "this is a value",
"end": 42
}
If you parsed the json string to a javascript object, like I assume you already have. You will have your object handle / variable. In your case that should be response.data.
With that handle you are able to get those object properties by accessing them using . after the handle and their name. For example you can display first_page_uri by writing this:
alert(response.data.first_page_uri)
Lists (Arrays)
Inside the response, there is a list. A list in JSON is represented like this:
"my_list": [
"a",
"b",
"c"
]
In this case the list has 3 values containing the strings a, b and c.
If you have a list in javascript, to get any of the values you can do the following:
alert(my_list[index])
Where my_list is the list and index is a value between 0 for the first element a and in this case 2 for the last element c.
Caution: we start counting from 0.
To show b in an alert we would write:
alert(my_list[1])
Combination of both
The attribute messages in your response is such a list. It contains not strings, but objects. Like so:
{
"messages": [
{
"body": "this is a message"
},
{
"body": "this is another message"
}
]
}
In this case if you wanted to retrieve the first message body and alert it, you would need to combine both patterns from above:
alert(response.body.messages[0].body)
I am assuming your object is in response.body. We are accessing messages and then selecting the first with [0] and then selecting body from that message.
Possible solutions
The problems you are encountering are probably the following:
alert is only able to show simple data types like string, number and so on. So trying to print out a whole list for example will not work.
I assume your other code is correct by the fact that you say that:
alert("Message is:"+JSON.stringify(response.data))
works.
All you would need to do to fix your code, is to remove the second line:
alert("Message is:"+JSON.parse(response.data.messages.from))
.from makes js try to access a property of a list. As discussed above. Objects have properties, lists do not. So react throws an exception.
Your other lines:
alert("Message is:"+JSON.stringify(response.data.messages))
alert("Message is:"+JSON.stringify(response.data.messages[0].from))
should work. As they seem to be correct.
The UI
Now regarding the UI part you are talking about...
If you are inside a react component, which would probably look somewhat like this:
const ComponentName = (/* maybe stuff here */) => {
// maybe a lot of stuff here
return (
/* this is the interesting part */
)
}
You want to be looking for the return part.
Inside there you can write HTML-like code. A simple UI output to show all messages would be:
const ComponentName = () => {
// here you do your api stuff so you get the response variable
const response;
return (
<>
<h1>All messages:</h1>
{
response.body.messages.map((message) => (
<p>{message.body}</p>
))
}
</>
)
}
I did use a new thing here: the map function on a list. I put it in the recommended reading section below.
The part in the middle:
<h1>All messages:</h1>
{
response.body.messages.map((message) => (
<p>{message.body}</p>
))
}
Is the important part. You can more or less put it anywhere in the return statement and it should show up.
Recommended reading
To learn more you probably want to look up the following things:
Arrays
Array (map function)
Object (literals)
React (quick start tutorial)
My thoughts (please ignore if unsuited)
If you are very new to javascript and this is a free time project. I would recommend taking it a step slower. While I do not want to discourage you from continuing with what you are doing, I assume that you can learn quicker and more effectively by stepping back and for example start with a HTML, CSS and JS only project without libraries. That should make you more comfortable in the concepts involved before jumping into a more complicated project. Especially if you do not have much or any experience with other languages.
A good start for that would be this project. It does include jQuery, but you do not need to use it.
I wish you the best of luck going forward!

You should use JSON.parse instead of JSON.stringify.
JSON.parse convert json string to js object and JSON.stringify do the reversed job.
So, your code should look like:
alert("Message is:"+JSON.parse(response.data.messages))
alert("Message is:"+JSON.parse(response.data.messages.from))
alert("Message is:"+JSON.parse(response.data.messages[0].from))
One more note here, to access nested property in JS object and avoid access anything from undefined, you should use JS optional chaining feature like below:
alert("Message is:"+JSON.parse(response?.data?.messages))
alert("Message is:"+JSON.parse(response?.data?.messages?.from))
The ? take care of null check for you.

Try this, but first replace this api with your api
import React from 'react';
import './style.css';
class App extends React.Component {
constructor() {
super();
this.state = {
data: null,
};
}
componentDidMount() {
fetch('https://reqres.in/api/users') // replace this api with your api
.then((response) => {
response.json().then((result) => {
console.warn(result.data);
this.setState({ data: result.data });
});
});
}
render() {
return (
<div>
{this.state.data
? this.state.data.map((item, i) => (
<div>
<p>
{i} --- {item.body} {item.from}{' '}
</p>
</div>
))
: null}
</div>
);
}
}
export default App;

webauthn authentication javascript formatting assistance

I have been trying to figure out how to do 2fa with webauthn and I have the registration part working. The details are really poorly documented, especially all of the encoding payloads in javascript. I am able to register a device to a user, but I am not able to authenticate with that device. For reference, I'm using these resources:
https://github.com/cedarcode/webauthn-ruby
https://www.passwordless.dev/js/mfa.register.js
And specifically, for authentication, I'm trying to mimic this js functionality:
https://www.passwordless.dev/js/mfa.register.js
In my user model, I have a webauthn_id, and several u2f devices, each of which has a public_key and a webauthn_id.
In my Rails app, I do:
options = WebAuthn::Credential.options_for_get(allow: :webauthn_id)
session[:webauthn_options] = options
In my javascript, I try to mimic the js file above and I do (this is embedded ruby):
options = <%= raw #options.as_json.to_json %>
options.challenge = WebAuthnHelpers.coerceToArrayBuffer(options.challenge);
options.allowCredentials = options.allowCredentials.map((c) => {
c.id = WebAuthnHelpers.coerceToArrayBuffer(c.id);
return c;
});
navigator.credentials.get({ "publicKey": options }).then(function (credentialInfoAssertion)
{
// send assertion response back to the server
// to proceed with the control of the credential
alert('here');
}).catch(function (err)
{
debugger
console.error(err); /* THIS IS WHERE THE ERROR IS THROWN */
});
The problem is, I cannot get past navigator.credentials.get, I get this error in the javascript console:
TypeError: CredentialsContainer.get: Element of 'allowCredentials' member of PublicKeyCredentialRequestOptions can't be converted to a dictionary
options at the time navigator.credentials.get is called looks like this:
I've tried every which way to convert my db-stored user and device variables into javascript properly encoded and parsed variables but cannot seem to get it to work. Anything obvious about what I'm doing wrong?
Thanks for any help,
Kevin
UPDATE -
Adding options json generated by the server:
"{\"challenge\":\"SSDYi4I7kRWt5wc5KjuAvgJ3dsQhjy7IPOJ0hvR5tMg\",\"timeout\":120000,\"allowCredentials\":[{\"type\":\"public-key\",\"id\":\"OUckfxGNLGGASUfGiX-1_8FzehlXh3fKvJ98tm59mVukJkKb_CGk1avnorL4sQQASVO9aGqmgn01jf629Jt0Z0SmBpDKd9sL1T5Z9loDrkLTTCIzrIRqhwPC6yrkfBFi\"},{\"type\":\"public-key\",\"id\":\"Fj5T-WPmEMTz139mY-Vo0DTfsNmjwy_mUx6jn5rUEPx-LsY51mxNYidprJ39_cHeAOieg-W12X47iJm42K0Tsixj4_Fl6KjdgYoxQtEYsNF-LPhwtoKwYsy1hZgVojp3\"}]}"

This is an example of the serialised JSON data returned by our implementation:
{
"challenge": "MQ1S8MBSU0M2kiJqJD8wnQ",
"timeout": 60000,
"rpId": "identity.acme.com",
"allowCredentials": [
{
"type": "public-key",
"id": "k5Ti8dLdko1GANsBT-_NZ5L_-8j_8TnoNOYe8mUcs4o",
"transports": [
"internal"
]
},
{
"type": "public-key",
"id": "LAqkKEO99XPCQ7fsUa3stz7K76A_mE5dQwX4S3QS6jdbI9ttSn9Hu37BA31JUGXqgyhTtskL5obe6uZxitbIfA",
"transports": [
"usb"
]
},
{
"type": "public-key",
"id": "nbN3S08Wv2GElRsW9AmK70J1INEpwIywQcOl6rp_DWLm4mcQiH96TmAXSrZRHciZBENVB9rJdE94HPHbeVjtZg",
"transports": [
"usb"
]
}
],
"userVerification": "discouraged",
"extensions": {
"txAuthSimple": "Sign in to your ACME account",
"exts": true,
"uvi": true,
"loc": true,
"uvm": true
}
}
This is parsed to an object and the code used to coerce those base64url encoded values is:
credentialRequestOptions.challenge = WebAuthnHelpers.coerceToArrayBuffer(credentialRequestOptions.challenge);
credentialRequestOptions.allowCredentials = credentialRequestOptions.allowCredentials.map((c) => {
c.id = WebAuthnHelpers.coerceToArrayBuffer(c.id);
return c;
});
Hope that helps. The JSON data is retreived via a fetch() call and the byte[] fields are encoded as base64url on the serverside.

Skip Chromecast selection when sending from Google Chrome

I'm trying to send data to a chromecast, but I would like to send the data to a certain Chromecast directly, without selecting it in the Google Chrome.
I would like to skip the Chromecast selection before sending data.
This is want to avoid.
I dont want to select the cast but directly cast the data to it.
I've been checking the session object that we get from chrome.cast.initialize and it return something like this:
{
"sessionId": "b59f1754-fd13-48cd-b237-4952a69cade4",
"appId": "5B797F56",
"displayName": "url-cast-sender",
"statusText": "URL Cast ready...",
"receiver": {
"label": "rTflOUigItAIYPwoZZ87Uv5oK8yI.",
"friendlyName": "Sala de Juntas",
"capabilities": [
"video_out",
"audio_out"
],
"volume": {
"controlType": "attenuation",
"level": 1,
"muted": false,
"stepInterval": 0.05000000074505806
},
"receiverType": "cast",
"isActiveInput": null,
"displayStatus": null
},
"senderApps": [],
"namespaces": [
{
"name": "urn:x-cast:com.google.cast.debugoverlay"
},
{
"name": "urn:x-cast:com.url.cast"
}
],
"media": [],
"status": "connected",
"transportId": "b59f1754-fd13-48cd-b237-4952a69cade4"
};
As you can see there is label there, I've been trying to work with it but nothing.
The way the page request the connection to a chromecast is the following:
// click handlers
document.getElementById('requestSession').onclick = function () {
chrome.cast.requestSession(sessionListener, onErr);
};
Which seems to be the part that opens the selection alert in Google Chrome.
My work is a fork from url-cast-receiver and you can check a demo here.

Turns out it is not possible from the frontend part.
So I ended up using a library called SharpCaster created by Tapanila, in which there is a controller that allows you to do this kind of stuff, here you can find an example of it.
Had some trouble to make it work and also opened an issue in the repository, but ended up fixing it myself, issue #141.
WebPageCastingTester.cs
using System.Linq;
using System.Threading.Tasks;
using SharpCaster.Controllers;
using SharpCaster.Services;
using Xunit;
namespace SharpCaster.Test
{
public class WebPageCastingTester
{
private ChromecastService _chromecastService;
public WebPageCastingTester()
{
_chromecastService = ChromecastService.Current;
var device = _chromecastService.StartLocatingDevices().Result;
_chromecastService.ConnectToChromecast(device.First()).Wait(2000);
}
[Fact]
public async void TestingLaunchingSharpCasterDemo()
{
var controller = await _chromecastService.ChromeCastClient.LaunchWeb();
await Task.Delay(4000);
Assert.NotNull(_chromecastService.ChromeCastClient.ChromecastStatus.Applications.First(x => x.AppId == WebController.WebAppId));
await controller.LoadUrl("https://www.windytv.com/");
await Task.Delay(4000);
Assert.Equal(_chromecastService.ChromeCastClient.ChromecastStatus.Applications.First(x => x.AppId == WebController.WebAppId).StatusText,
"Now Playing: https://www.windytv.com/");
}
}
}

Facebook Marketing API - Cannot Create Ad-Set

I'm new to the facebook marketing API.
I was able to create a campaign.
But it seems I cannot create Adset.
I've tried posting with Javascript to the Adset:
https://graph.facebook.com/v2.8/act_156221465583672/adsets
with this payload:
var targeting = {
"age_max": 43,
"age_min": 18,
"geo_locations": { "countries": ["US"] }
};
var campaignId = "520337003094784508";
var promotedObject = {
'application_id': 2242592062246511
};
and post body:
{
"access_token": accessToken,
"name": "testNirAd",
"lifetime_budget": "8000",
"autobid": "true",
"start_time": new Date("October 13, 2017 00:00:00"),
"end_time": new Date("November 13, 2017 00:00:00"),
"optimization_goal": "POST_ENGAGEMENT",
"billing_event": "IMPRESSIONS",
"daily_budget": "2000",
"campaign_id": campaignId,
"targeting": JSON.stringify(targeting),
"status": "PAUSED"
}
But I get this error:
{
"error": {
"message": "Invalid parameter",
"type": "OAuthException",
"code": 100,
"error_data": {
"blame_field_specs": [
[
"name"
]
]
},
"error_subcode": 2061015,
"is_transient": false,
"error_user_title": "Required Field Is Missing",
"error_user_msg": "The name field is required. Please complete the
field to continue.",
"fbtrace_id": "HFg4HmwbQhG"
}
}
Which is strange because I have a name field.
Then I've tried the same with the Javascript SDK
https://github.com/lucascosta/facebook-js-ads-sdk, with the same payload data,
and this time I get:
{
code:1
fbtrace_id:"DcXmP0Wr82Q"
message:"An unknown error has occurred."
type:"OAuthException"
}
Please can anybody help?

Tried also with different, less parameters, with Curl, and got the same results:
curl /
-F 'name=MyFirstTest' /
-F 'billing_event=IMPRESSIONS' /
-F 'bid_amount=2' /
-F 'daily_budget=1000' /
-F 'campaign_id=120330000094784508' /
-F 'targeting={"geo_locations":{"countries":["US"]}}' /
-F 'start_time=2017-10-14T16:06:09+0000' /
-F 'end_time=2017-11-21T16:06:09+0000' /
-F 'status=PAUSED' /
-F 'access_token= EAAf0hSLb7osBAEgUpUtkGydJ9mmfZCzYumfNVxDFUjBFtx7C8aos3x
LbzjwkZBEbgXkWAT75OvIy6HXNTFBEqN1ca1aVvWT3RQAAKAAi6jYyncTG3m9ae0MkZAM9gZDZD'
/https://graph.facebook.com/v2.8/act_116221225224746/adsets
And got:
{"error":{"message":"Invalid
parameter","type":"OAuthException","code":100,"error_data":
{"blame_field_specs":[["name"]]},"error_subcode":2061015,"is_transient":
false,"error_user_title":"Required Field Is Missing","error_user_msg":"The
name field is required. Please complete the field to
continue.","fbtrace_id":"AeI4nngXTmj"}}
fbtrace_id: AeI4nngXTmj
By the way, I'm using a sandbox account.
Thanks!

I would recommend not posting the access tokens on public forums.
The error is most likely a formatting issue.
Easiest way to debug is to use the Graph API explorer tool, which lets you pick you app, generate the token, and define the parameters.
You can then get the curl code once you know the syntax is correct.
https://developers.facebook.com/tools/explorer/
Also, the code sample for creating app ads might help you, though it's not JS.
https://www.facebookmarketingdevelopers.com/samples/app_install_ad

Sending email notifications for Events via Google Calendar API

I'm using the calendar.events.insert API to add an Event to my Calendar via the PHP client.
The event is being inserted correctly along with appropriate values as set by the API.
The same however is not able to trigger an email invite to the attendees. I looked around to find that the request needs to set the param sendNotifications as true.
The same doesn't seem to help either.
Here is a sample code:
var request = gapi.client.calendar.events.insert({
"calendarId" : calendarData.id,
"sendNotifications": true,
"end": {
"dateTime": eventData.endTime
},
"start": {
"dateTime": eventData.startTime
},
"summary": eventData.eventName,
"attendees": jQuery.map(eventData.attendees, function(a) {
return {'email' : a};
}),
"reminders": {
"useDefault": false,
"overrides": [
{
"method": "email",
"minutes": 15
},
{
"method": "popup",
"minutes": 15
}
]
}
});
Where eventData and calendarData are appropriate objects.
Although my main problem is with email invites being sent the first time, I also tried (as can be seen above) to set a reminder (using overrides). While the popup works as expected, I didn't receive an email update in this case either.
This makes me wonder whether this may be a permission issue - something which I need to enable for my app perhaps (the user would understandably need to know if my app is sending emails on their behalf)?

In the Google API Documentation for inserting events, the "sendNotifications" option is actually a parameter. You might want to put it in the request parameters instead of the body.
In Meteor
Note: In my Meteor application, I did did the request by hand, and I'm still new to JavaScript. I'm not sure how you would do that in plain JavaScript or with the calendar API, so I'll just put the Meteor code, hope it helps although it's a bit off-topic.
var reqUrl = "https://www.googleapis.com/calendar/v3/calendars/primary/events";
var payload = {
'headers' : {
'Authorization': "Bearer " + token,
'Content-Type': 'application/json'
},
'params': {
'sendNotifications': true
},
'data': {
"summary": summary,
"location": "",
"start": {
"dateTime": start
},
"end": {
"dateTime": end
},
"attendees": [
{
"email": "*********#gmail.com"
}
]
}
};
Meteor.http.post(reqUrl, reqParams, function () {});

#linaa is correct. Just ran into this issue myself.
In JS, this would look like:
var request = gapi.client.calendar.events.insert(
sendNotifications: true,
{
// request body goes here
}
);

For this you should set the "remindOnRespondedEventsOnly" value to "true".
which means, Whether event reminders should be sent only for events with the user’s response status “Yes” and “Maybe”.
You can find this information here.
Hope that helps!

event = service.events().insert(calendarId='primary', body=event, sendUpdates='all').execute()
this will work