I have a method to query some data called read()
var data = "";
read() async {
var res = await SqlConn.readData(
"SPS_CUST1APP_1 'MW','FB','','','','',5,0");
debugPrint(res.toString());
setState(() {
data = res;
});
}
Them im display my data into Text() widget. but this is what it show in my flutter apps
[
{
"CUST_CODE": 11,
"CUST_NAME": "IMAS HALIMATUSADIYAH",
"CUST_TYPE": "MEMBER",
"OFFI_CODE": "KOPKAR ECCINDO",
"PHON_NMBR": "",
"CUST_ADDR": "TAMAN PINANG INDAH BLOK G-6/3 SIDOARJO 27-5",
"EMAI_ADDR": "",
"AREA_CODE": 03,
"SLMN_NMBR": "",
"CLMT_VALU": 1600000,
"CLMT_VAL2": 900000.0000,
"STOR_NAME": ""
},
{
"CUST_CODE": 12,
"CUST_NAME": "AGUS PRIHENDRATMO",
"CUST_TYPE": "MEMBER",
"OFFI_CODE": "KOPKAR ECCINDO",
"PHON_NMBR": "",
"CUST_ADDR": "JL.SEMERU-PEPELEGI-WARU SIDOARJO 8-3",
"EMAI_ADDR": "",
"AREA_CODE": 03,
"SLMN_NMBR": "",
"CLMT_VALU": 1600000,
"CLMT_VAL2": 900000.0000,
"STOR_NAME": ""
}
]
and I'm sure it's Json.
So is there any ways to make the return of data value into a table? Because I'm not going to show all column in my flutter.
And what widget do I need to do that?
Related
i'm new to coding and i'm building a web app using reactjs. i need to render a widget that contains a table to display data that comes from the back-end in json format. The table will change dynamically over time and will always be different.
I found a library that could work for me :
https://github.com/thehyve/react-json-to-table
It works like wonders, but i can't render clickable urls in the tables.
Someone can help me archieve this?
i have some data like this:
{
"Loaded by": "Jills",
"Load id": 34,
"git id": "xxqaygqertqsg98qhpughqer",
"Analysis Id": "7asdlnagsd98gfaqsgf",
"Load Date": "July 12, 2018",
"Data Source": "Study XY123-456",
"Jira Ticket": "Foo-1",
"Confluence URL": "http://myserver/wxyz"
}
the my component looks like this:
export default class TableWidget extends BaseWidget {
constructor(props) {
super(props);
const { data } = this.props;
const data2 = data;
this.state = {
data: this.getData(data2)
};
this.handleResize = this.handleResize.bind(this);
}
componentWillMount() {
super.componentWillMount();
this.props.socket.on(`widget:update:${this.props.jobName}:${this.props.name}`, datas => {
logger('info', `updating widget: ${this.props.jobName}:${this.props.name}`, datas);
this.setState({
data: this.getData(datas.value),
});
});
}
getData(data) {
const demoJson = {
"Loaded by": "Jills",
"Load id": 34,
"git id": "xxqaygqertqsg98qhpughqer",
"Analysis Id": "7asdlnagsd98gfaqsgf",
"Load Date": "July 12, 2018",
"Data Source": "Study XY123-456",
"Jira Ticket": "Foo-1",
"Confluence URL": "http://myserver/wxyz"
};
if (data == null )
return demoJson;
else
return data;
}
static get layout() {
return {
x: 0,
y: 0,
w: 4,
h: 3,
minH: 3,
maxH: 40,
minW: 4,
maxW: 10,
};
}
static get className() {
return 'TableWidget';
}
handleResize() {
this.chart.reflow();
}
render() {
const classList = classNames(...this.classList, 'widget', 'widget__table',);
return (
<div className={classList}>
<h1 className="widget__title">{this.props.title}</h1>
<JsonToTable json={this.state.data} />
</div>
);
}
}
TableWidget.propTypes = {
title: PropTypes.string.isRequired,
};
the table renders fine but i want to be albe to clikc on the "conference url". how can i archieve this?
maybe I could use one of these two libraries?
https://github.com/arqex/react-json-table
or
https://github.com/agracio/ts-react-json-table
thanks for the help and sorry if i made some English or code abominations.
I want to configure the text label user friendly. eg http response be like
[
{
"approved_datetimestamp": "",
"approved_by": "",
"effective_datetimestamp": "",
"act_datetimestamp": "",
"expiry_datetimestamp": "",
"rejected_datetimestamp": "",
"rejected_by": ""
}
]
Here, the key is a label, I want to configure that key. E.g. approved_datetimestamp would be Approved Datetimestamp.
I have approach that we can create constant variable like
const approved_datetimestamp = "Approved Datetimestamp";
when we displaying in template, I am using:
<div class="col-sm-6">{{row[rcolumn] | uppercase}}</div>
or else
capitalise first letter of each word and replace underscore with a space. am expacting this
You are thinking about creating dynamic keys
You need to create a key with some filter (I got the code from LazioTibijczyk), then simply pass it into an object to assign it. It will create that new key dynamically. Here is a demo of it:
var object = {
"approved_datetimestamp": "",
"approved_by": "",
"effective_datetimestamp": "",
"act_datetimestamp": "",
"expiry_datetimestamp": "",
"rejected_datetimestamp": "",
"rejected_by": ""
};
var new_object = {};
for (var property in object) {
var new_key = property.toLowerCase()
.split('_')
.map((s) => s.charAt(0).toUpperCase() + s.substring(1))
.join(' ');
new_object[new_key] = "";
}
console.log(new_object);
Here it is, iterate through object properties, split them on underscore and capitalise each word, then assign it to the property.
var object = {
"approved_datetimestamp": "jsjs",
"approved_by": "",
"effective_datetimestamp": "",
"act_datetimestamp": "",
"expiry_datetimestamp": "",
"rejected_datetimestamp": "",
"rejected_by": ""
};
for(var property in object) {
var newProperty = property.toLowerCase()
.split('_')
.map((s) => s.charAt(0).toUpperCase() + s.substring(1))
.join(' ');
object[newProperty] = object[property];
delete object[property];
}
console.log(object);
I have a model City which hasMany CitiesDescriptions.
I would like to update City, but whenever the data contains CitiesDescriptions I would like them to be updated as well.
This is what my data looks like:
{
"id": 4263,
"name": "Accra",
"country_id": 9,
"slug": "accra-5",
"code": "ACD",
"hdo_code": "",
"tourico_code": null,
"active": true,
"CitiesDescriptions": [
{
"id": 1,
"lang": "es",
"description": "text text"
}
]
}
So, in this case I want the data within CitiesDescriptions to be updated.
In the case that one of the objects inside CitiesDescriptions is a new record (doesn't have ID) I want it to be created.
Anyway, I haven't found a way to do this, whatever I found fails in some way. The closest I found that almost works is this:
var city = models.City.build(params, {
isNewRecord : false,
include : [models.CitiesDescription]
});
Promise.all([
city.save(),
city.CitiesDescriptions.map(function (description) {
if (description.getDataValue('id')) {
return description.save();
} else {
description.city_id = city.id;
return models.CitiesDescription.create(description.dataValues);
}
})
]).then(function(results) {
res.send(results);
});
This works except with the data doesn't have a CitiesDescriptions key.
Still, looks way to complicated to do, specially if tomorrow I have more associated models.
Isn't there any way to do this without so much hassle?
EDIT:
Couldnt find a solution, I made this and it works as intended.
var params = req.body;
var promises = [];
promises.push(models.City.update(params, {
where: {
id: parseInt(req.params.id)
}
}));
if(params.CitiesDescriptions) {
promises.push(
params.CitiesDescriptions.map(function (description) {
return models.CitiesDescription.upsert(description, {individualHooks: true});
})
);
}
Promise.all(promises).then(function(results) {
res.send(results);
});
{
"isSuccessful": true,
"resultSet": [
{
"name": "pradeep",
"password": 123,
"timestamp": "2014-04-08T12:58:45.000Z"
},
{
"name": "dileep",
"password": 1234,
"timestamp": "2014-04-08T13:00:52.000Z"
}
]
}
This invocation result i have got by using Sql adapter so how to parse this invocation result and how can i display name,password,timestamp from this JSON object.Do i need to use HTTP Adapter.
If you want to get the length of results you should use result.invocationResult.resultSet.length which will give you the total number of results, where items is the response coming from the adapter and invocationResult contains the results and other paramaters, from which you will have to access the results for accessing only the particular output.To get value call
result.invocationResult.resultSet.name[position]
Like that call all the fields password,timestamp with position
in for loop
function handleSuccess(result) {
var invocationResult = result.invocationResult;
var isSuccessful = invocationResult.isSuccessful;
if (true == isSuccessful) {
var result = invocationResult.resultSet;
for ( var i = 0; i < result.length; i++) {
alert(result.name[i]);
alert(result.password[i]);
alert(result.timestamp[i]);
}
} else {
alert("error");
}
I have a flash app where in a function I have to parse a json passed like an object by some external API that I can't change.
my json look like this:
{
"prodotti": [
{
"titolo": "test",
"marca": "",
"modello": "",
"cilindrata": "",
"potenza": "",
"alimentazione": "",
"images": {
"img": [
{
"thumb": "admin/uploads/img_usato/small/qekabw95L5WH1ALf6.jpg",
"big": "admin/uploads/img_usato/big/qekabw95L5WH1ALf6.jpg"
},
{
"thumb": "admin/uploads/img_usato/small/default.jpg",
"big": "admin/uploads/img_usato/big/default.jpg"
}
]
}
},
{
"titolo": "Motore Volvo TAMD 74 C",
"marca": "VOLVO PENTA",
"modello": "TAMD 74 C",
"cilindrata": "7.283 cm3",
"potenza": "331 kW a 2600 rpm",
"alimentazione": "Gasolio",
"images": {
"img": [
{
"thumb": "admin/uploads/img_usato/small/PmQwN4t4yp7P1YCWa.jpg",
"big": "admin/uploads/img_usato/big/PmQwN4t4yp7P1YCWa.jpg"
},
{
"thumb": "admin/uploads/img_usato/small/BWkjTGcy3pDM2LKRs.jpg",
"big": "admin/uploads/img_usato/big/BWkjTGcy3pDM2LKRs.jpg"
}
]
}
}
]
}
I want to parse the images inside the object.
The API send me an object not astring or json and I have this function now:
function changeData (prodotto:Object) {
img_container.graphics.clear ();
//here I want to enter and take thumb and big of images!!!
for (var index in prodotto.images.img) {
//trace('index: ' + index);
//trace("thumb: " + index.thumb + ' big: ' + index.big);
}
descrizione.htmlText = prodotto.testo_html;
titolo.text = prodotto.titolo;
alimentazione.text = prodotto.alimentazione;
potenza.text = prodotto.potenza;
cilindrata.text = prodotto.cilindrata;
modello.text = prodotto.modello;
marca.text = prodotto.marca;
}
The function works fine but not for the for loop where I try to take the bug and thumb of my json how can I retrieve this information in this object?
Thanks
I think there is something wrong with how you are setting up the call back but since you didn't show code for the api we can't fix that, plus you stated you have no control over it.
No matter what the issue is it just does not seem correct.
I put together a function that will get all the thumbs and bigs.
You did not state otherwise.
function changeData (prodotto:Object) {
for each(var item in prodotto.prodotti){
trace('')
//trace(prodotto.testo_html);
trace(item.titolo);
trace(item.alimentazione);
trace(item.potenza);
trace(item.cilindrata);
trace(item.modello);
trace(item.marca);
for each( var imgs in item.images.img) {
trace('thumb',imgs.thumb)
trace('big',imgs.big)
}
}
}
I think you need to use a JSON parser. Use the one from this link: https://github.com/mikechambers/as3corelib
1: Add the com folder to your project directory or add it to your default class path.
2: Adapt this code to your liking. I am not sure how you're getting a literal object from the API. It really should just be a string unless you're using some sort of AMF. Regardless...
import com.adobe.serialization.json.*;
var data:String = '{"prodotti":[{"titolo":"test","marca":"","modello":"","cilindrata":"","potenza":"","alimentazione":"","images":{"img":[{"thumb":"admin/uploads/img_usato/small/qekabw95L5WH1ALf6.jpg","big":"admin/uploads/img_usato/big/qekabw95L5WH1ALf6.jpg"},{"thumb":"admin/uploads/img_usato/small/default.jpg","big":"admin/uploads/img_usato/big/default.jpg"}]}},{"titolo":"Motore Volvo TAMD 74 C","marca":"VOLVO PENTA","modello":"TAMD 74 C","cilindrata":"7.283 cm3","potenza":"331 kW a 2600 rpm","alimentazione":"Gasolio","images":{"img":[{"thumb":"admin/uploads/img_usato/small/PmQwN4t4yp7P1YCWa.jpg","big":"admin/uploads/img_usato/big/PmQwN4t4yp7P1YCWa.jpg"},{"thumb":"admin/uploads/img_usato/small/BWkjTGcy3pDM2LKRs.jpg","big":"admin/uploads/img_usato/big/BWkjTGcy3pDM2LKRs.jpg"}]}}]}';
function changeData(data)
{
img_container.graphics.clear();
var obj = JSON.decode(data);
for (var i:int = 0; i < obj.prodotti.length; i++)
{
for (var k in obj.prodotti[i].images.img)
{
trace("Thumb:",obj.prodotti[i].images.img[k].thumb);
trace("Big:",obj.prodotti[i].images.img[k].big);
}
descrizione.htmlText = obj.prodotti[i].testo_html;
titolo.text = obj.prodotti[i].titolo;
alimentazione.text = obj.prodotti[i].alimentazione;
potenza.text = obj.prodotti[i].potenza;
cilindrata.text = obj.prodotti[i].cilindrata;
modello.text = obj.prodotti[i].modello;
marca.text = obj.prodotti[i].marca;
}
}
changeData(data);