Image source from state attribute - image

So I have this database:
[
{
"url": "https://i.imgur.com/5UzmND6.png",
"idEquipo": 4
},
{
"url": "https://i.imgur.com/yNj4w3b.jpg",
"idEquipo": 3
},
{
"url": "https://i.imgur.com/410yDrl.png",
"idEquipo": 1
},
{
"url": "https://i.imgur.com/Qv4S7p7.png",
"idEquipo": 2
},
{
"url": "https://drive.google.com/file/d/1RKsZuCqlheKnuu5yf-6MLoct_SDqX6we/view",
"idEquipo": 5
}
]
I want to use the state "imagen" as my image source.
This is my fetch:
getImagenes(id) {
fetch(Global.url + "Imagenes?idEquipo=" + id)
.then(res => res.json())
.then(res => {
this.setState({
imagen: res,
isLoading: false,
});
});
}
To be clear, fetch(Global.url + "Imagenes?idEquipo=" + id) returns this:
[
{
"url": "https://i.imgur.com/410yDrl.png",
"idEquipo": 1
}
]
So I want to get access to the url and use it as the source of my image.
This is my code, but it doesnt work. It's the first time I use uri, i'm a student.
<View style={styles.app_LogoContainer}>
<Image source={{uri: this.state.imagen.url}}
style={styles.image}></Image>
</View>
How can I do this? Thanks for the help

It's not clear to me that you have an object or an array with a single item. Did you try with imagen[0].url?

Related

Type ahead search does not work from Task Module

I need to implement a scenario where type ahead search makes a call to my remote api and fills in the choice list. This works fine the if adaptive card is sent directly in the chat. But this not work inside if the adaptive card is sent in the task module.
Steps
Following is the message which is sent for adaptive card
const card = CardFactory.adaptiveCard({
type: 'AdaptiveCard',
body: [
{
type: 'RichTextBlock',
inlines: [
{
type: 'TextRun',
text: 'Test',
weight: 'bolder',
},
{
type: 'TextRun',
text: 'Test',
}
],
separator: parseInt(index) === 0,
spacing: parseInt(index) === 0 ? 'extraLarge': 'default',
},
{
title: 'Update',
type: 'Action.Submit',
data: {
msteams: {
type: 'task/fetch'
},
id: 'Upate Id',
buttonText: 'Update',
}
}
],
$schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
version: '1.5',
})
Following is card which is sent in task module
const card = CardFactory.adaptiveCard({
$schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
version: '1.5',
type: 'AdaptiveCard',
body: [
{
"columns": [
{
"width": "stretch",
"items": [
{
"choices": [
{
"title": "Static Option 1",
"value": "static_option_1"
},
{
"title": "Static Option 2",
"value": "static_option_2"
},
{
"title": "Static Option 3",
"value": "static_option_3"
}
],
"isMultiSelect": false,
"style": "filtered",
"choices.data": {
"type": "Data.Query",
"dataset": "npmpackages",
"testkey": "harkirat"
},
"id": "choiceselect",
"type": "Input.ChoiceSet"
}
],
"type": "Column"
}
],
"type": "ColumnSet"
}
],
actions: [
{
type: 'Action.Submit',
title: 'Save',
data: {
privateMeta,
replyToId
}
}
]
});
Following is the onActivityInvoke code:-
async onInvokeActivity(context: TurnContext): Promise<InvokeResponse<any>> {
if (context.activity.name === 'task/fetch') {
const result = await this.handleTeamsTaskModuleFetch(context, {
replyToId: context.activity.replyToId,
data: context.activity.value.data
});
return {
status: 200,
body: result
}
}
if (context.activity.name == 'application/search') {
const successResult = {
status: 200,
body: {
"type": "application/vnd.microsoft.search.searchResponse",
"value": {
"results": [
{
"value": "FluentAssertions",
"title": "A very extensive set of extension methods"
},
{
"value": "FluentUI",
"title": "Fluent UI Library"
}
]
}
}
}
return successResult;
}
}
Note that the activityInvoke function is not called when I enter the search text in my input box. However, if I send this card directly i.e without task module and directly in chat it works just fine.
Can someone please help me understand if I am missing something, is this a bug or the feature itself is not supported?

facebook graph api images GraphRequest

I'm attempting to get the profile image of the user after logging in using FB graph. I'm getting a URL but no image
code:
async fetchProfile(callback) {
return new Promise((resolve, reject) => {
const request = new GraphRequest(
'/me',
{
parameters: { fields: { string: 'picture.width(480),name' } }
},
(error, result) => {
if (result) {
const profile = result
profile.avatar = `https://graph.facebook.com/${result.id}/picture`;
resolve(profile)
} else {
reject(error)
}
}
)
this.requestManager.addRequest(request).start()
})
}
}
response:
{
"avatar": "https://graph.facebook.com/4567877885493457976/picture",
"id": "4567877885493457976",
"name": "Billy Pope",
"picture": {
"data": {
"height": 389,
"is_silhouette": false,
"url": "https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=10219826402184549&width=480&ext=1588823752&hash=AeTZXPsxkrdi79ep",
"width": 480
}
}
}
How do I extract the image from either of these urls - avatar or url? Thanks
To display the image, I changed the view to look like:
{this.state.picture ? (
<Image
source={{ uri: this.state.picture }}
style={styles.imageStyle}
/>
) : null}
adding a condition along with height and width and the image suddenly appeared.

Transforming object data to array for d3plus-react

I have an api that returns data in the following format:
{
"Information Technology": {
"Name": "Information Technology",
"Change": "0.82%"
},
"Consumer Staples": {
"Name": "Consumer Staples",
"Change": "0.19%"
}
}
I want to convert it to the following format inside my d3plus visualizations:
[
{
"Name": "Information Technology",
"Change": "0.82%"
},
{
"Name": "Consumer Staples",
"Change": "0.19%"
}
]
How do I do this. Here's my React component that uses d3plus:
function Chart() {
const methods = {
groupBy: 'Name',
data: 'https://example.com/api/sectors-performance',
size: d => d.Change
};
return <Treemap config={methods} />;
}
There was a small hint in the docs which helped me come up with this solution:
function Chart() {
const methods = {
groupBy: 'id',
data: 'https://example.com/api/sectors-performance',
size: d => d.value
};
const formatter = d =>
Object.keys(d).map(key => ({
id: d[key].Name,
value: numeral(d[key].Change).value()
}));
return <Treemap config={methods} dataFormat={formatter} />;
}
The trick is to send a formatter as a property!

ExtJS: How to hide specific data on store with filtering?

I want to hide a record on Grid that returns from server.
I've setted a filter on store and can reach that specific data but how I'll handle to hide/ignore this record?
fooStore: {
....
filters: [
function(item) {
let me = this;
let theRecord = item.data.status === MyApp.STATUS; //true
if (theRecord) {
console.log(theRecord); //True
console.log("So filter is here!!")
//How to hide/ignore/avoid to load this specific data record to load Grid??
}
}
]
},
Returned JSON;
{
"success": true,
"msg": "OK",
"count": 3,
"data": [
{
//Filter achives to this record and aim to hide this one; avoid to load this record.
"id": 102913410,
"status": "P"
},
{
"id": 98713410,
"status": "I"
},
{
"id": 563423410,
"status": "A"
}
]
}
I can't save my fiddle cause i don't have sencha forum's account so i give you my code :
Ext.application({
name : 'Fiddle',
launch : function() {
var model = Ext.create('Ext.data.Model', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'status', type: 'string'},
]
});
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: model,
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
filters: [function(item) {
if (item.data.status === "P") {
return true;
}
else {
return false;
}
}],
listeners: {
load: {
fn: function() {
console.log(this.getRange());
}
}
}
});
}
});
Also i create data.json like this :
{
"success": true,
"msg": "OK",
"count": 3,
"data": [{
"id": 102913410,
"status": "P"
}, {
"id": 98713410,
"status": "I"
}, {
"id": 563423410,
"status": "A"
}]
}
I thinks it's near to you'r code and after the loading of the store the filter work as you can this :
Here is sencha fiddle link : https://fiddle.sencha.com/#view/editor
If this can't work, i don't understand what the fuck doing...

InvalidPathException: No action config found for the specified url

I am getting below error as Ajax call response.
Below is the response body for Ajax call.
Apache Tomcat/7.0.61 - Error report
HTTP Status 500 - org.apache.struts.chain.commands.InvalidPathException: No action config found for the specified url.type Status reportmessage org.apache.struts.chain.commands.InvalidPathException: No action config found for the specified url.description The server encountered an internal error that prevented it from fulfilling this request.Apache Tomcat/7.0.61
Is it something to do with JRE 7?
Here is the JavaScript code from my JSP file.
I have defined a table in my JSP file which is referenced here.
function showLogHistory() {
var questionId = document.getElementById('txtQuestionId').innerHTML;
var url = "myAction.do?dispatchMethodName=showmyAudit&questionId="+questionId;
if ( $.fn.DataTable.isDataTable('#tblmyAudit') ) {
$('#tblmyAudit').DataTable().destroy();
}
$('#tblmyAudit').DataTable( {
"initComplete": function(settings, json) {
$("#tblmyAudit tbody tr.data-in-table").each(function () {
var i=0;
$(this).find('td').each(function (index) {
var currentCell = $(this);
var nextCell =
$(this).closest('tr').next('tr').find('td').eq(i).length > 0 ?
$(this).closest('tr').next('tr').find('td').eq(i) : null;
if ( currentCell.text() !== nextCell.text()) {
currentCell.css('backgroundColor', 'yellow');
}
i=i+1;
});
});
},
"ajax": {
"url": url,
"cache": true
},
"columns": [
{ "data": "questionId" },
{ "data": "Category" },
{ "data": "Area" },
{ "data": "question" },
{ "data": "answer" },
{ "data": "updated_by" },
{ "data": "updated_date" }
],
"scrollX": true,
"columnDefs": [ {
"targets": [ '_all' ],
"orderable": false
} ],
"createdRow": function( row, data, dataIndex ) {
$(row).addClass( 'data-in-table' );
}
} );
$('#detmyAudit').modal('show');
}
URL that gets generated for Ajax seems proper.

Resources