Related
I am using s react table to to display a table of data
In tags column I want display both the tags present in tags array
of object like this. I did tried some ways but didn't get any
success as of yet. New to tables, so any better way to do this
will be appreciated.
code-sandbox link :
CodeSandBox
[
{
"id": 1,
"first_name": "Torie",
"last_name": "Rustman",
"email": "trustman0#amazon.co.uk",
"date_of_birth": "1979-11-16T23:04:32Z",
"age": 45,
"tags": null,
"phone": "6844103517"
},
{
"id": 2,
"first_name": "Kordula",
"last_name": "Gecks",
"email": "kgecks1#deviantart.com",
"date_of_birth": "1997-08-06T21:07:34Z",
"age": 30,
"tags": null,
"phone": "8429683893"
},
{
"id": 3,
"first_name": "Vikki",
"last_name": "Simoens",
"email": "vsimoens2#ted.com",
"date_of_birth": "2016-04-28T16:59:19Z",
"age": 48,
"tags": [
{ "id": 0, "name": "tag1" },
{ "id": 1, "name": "tag2" }
],
"phone": "8672773997"
},
{
"id": 4,
"first_name": "Burnaby",
"last_name": "Cowern",
"email": "bcowern3#forbes.com",
"date_of_birth": "2017-10-25T08:05:50Z",
"age": 54,
"tags": [
{ "id": 0, "name": "tag3" },
{ "id": 1, "name": "tag4" }
],
"phone": "4257971694"
},
{
"id": 5,
"first_name": "Teddie",
"last_name": "Traice",
"email": "ttraice4#zdnet.com",
"date_of_birth": "2015-04-20T11:45:34Z",
"age": 57,
"tags": [
{ "id": 0, "name": "tag5" },
{ "id": 1, "name": "tag6" }
],
"phone": "3932158370"
},
{
"id": 7,
"first_name": "Shayna",
"last_name": "Dimitresco",
"email": "sdimitresco6#uiuc.edu",
"date_of_birth": "1997-10-28T11:25:07Z",
"age": 21,
"tags": null,
"phone": "1216713219"
}
]
You could define the cell display function when you are defining the columns like you are doing for the date field.
{
Header: "Tags",
Footer: "Tags",
accessor: "tags",
// accessor: "tags[0].name"
Cell: ({ value }) => {
const values = value ? value.map((v) => v.name + ' ') : '';
return values;
}
}
Forked sandbox here
companyList = data['fields'][0]['choices'];
if (companyList.length != 0) {
int val;
for (val = 0; val < companyList.length; val++) {
final controller = TextEditingController();
final field = xTextfield(
txtlabel: "Values",
iconfield: bookmarksIcon,
);
setState(() {
_controllers.add(controller);
_fields.add(field);
});
}
}
But this works only if json response is same when it changes and Array object is differnet i got error here is my json that will be different everytime e.g
"inputtype": "dropdown", will make a dropdown widget and all data will be put into it and so on
{ "fields": [ { "id": 31, "name": "make", "isrequired": "required", "valuetype": "text", "priority": 1, "inputtype": "dropdown", "max_min": [], "rangeable": "false", "choices": [ { "id": 46, "name": "Samsung", "categoryextrafield_id": 31, "created_at": "2021-12-29T01:30:47.000000Z", "updated_at": "2021-12-29T01:30:47.000000Z", "priority": 10 }, { "id": 47, "name": "Dell", "categoryextrafield_id": 31, "created_at": "2021-12-29T01:30:52.000000Z", "updated_at": "2021-12-29T01:30:52.000000Z", "priority": 20 }, { "id": 48, "name": "IBM", "categoryextrafield_id": 31, "created_at": "2021-12-29T01:31:09.000000Z", "updated_at": "2021-12-29T01:31:09.000000Z", "priority": 30 }, { "id": 49, "name": "Acer", "categoryextrafield_id": 31, "created_at": "2021-12-29T01:31:24.000000Z", "updated_at": "2021-12-29T01:31:24.000000Z", "priority": 40 } ], "available": [] }, { "id": 32, "name": "model", "isrequired": "required", "valuetype": "text", "priority": 2, "inputtype": "textfield", "max_min": [], "rangeable": "false", "choices": [], "available": [ { "model": "a51" }, { "model": "y9s" }, { "model": "a31" }, { "model": "yS10" }, { "model": "Y10S" }, { "model": "A551" }, { "model": "node8" }, { "model": "s9" }, { "model": null }, { "model": "2021" }, { "model": "2020" }, { "model": "2010" }, { "model": "Civic" }, { "model": "2019" }, { "model": "Daewooy9" }, { "model": "corei5" }, { "model": "corei9" }, { "model": "corei3" }, { "model": "corei11" } ] }, { "id": 29, "name": "features", "isrequired": "required", "valuetype": "text", "priority": 3, "inputtype": "checkbox", "max_min": [], "rangeable": "false", "choices": [ { "id": 41, "name": "Bluetooth", "categoryextrafield_id": 29, "created_at": "2021-12-29T01:19:00.000000Z", "updated_at": "2021-12-29T01:19:00.000000Z", "priority": 1 }, { "id": 42, "name": "Fingerprint", "categoryextrafield_id": 29, "created_at": "2021-12-29T01:19:10.000000Z", "updated_at": "2021-12-29T01:19:10.000000Z", "priority": 10 }, { "id": 43, "name": "LedDisplay", "categoryextrafield_id": 29, "created_at": "2021-12-29T01:19:35.000000Z", "updated_at": "2021-12-29T01:19:35.000000Z", "priority": 15 } ], "available": [] }, { "id": 30, "name": "condition", "isrequired": "required", "valuetype": "text", "priority": 4, "inputtype": "radiobutton", "max_min": [], "rangeable": "false", "choices": [ { "id": 44, "name": "Used", "categoryextrafield_id": 30, "created_at": "2021-12-29T01:20:31.000000Z", "updated_at": "2021-12-29T01:20:31.000000Z", "priority": 10 }, { "id": 45, "name": "New", "categoryextrafield_id": 30, "created_at": "2021-12-29T01:20:38.000000Z", "updated_at": "2021-12-29T01:20:38.000000Z", "priority": 20 } ], "available": [] } ] }
You can use the Dynamic Widget package.
Just pass the widget as JSON data from the server and use a FutureBuilder to build it when your data arrives.
You will also need to change your JSON data accordingly.
This is my multi dimensional array.
Output should be in array2 structure.
I have tried many ways covert above array in easy but all came up with bulky code and lots of iteration.
Is there any easy way to do so?
I am a new in angular and JavaScript.
var array1=[
{
"id": 1,
"name": "Johny",
"category": [
{
"id": 12,
"name": "GUI",
"status": {
"id": 123,
"status": "working",
"name": "GUI"
}
},
{
"id": 13,
"name": "GFX",
"status": {
"id": 124,
"status": "working",
"name": "GFX"
}
},
{
"id": 14,
"name": "UI",
"status": {
"id": 125,
"status": "working",
"name": "UI"
}
}
]
},
{
"id": 2,
"name": "Paul",
"category": [
{
"id": 21,
"name": "GUI",
"status": {
"id": 212,
"status": "Progress",
"name": "GUI"
}
},
{
"id": 22,
"name": "GFX",
"status": {
"id": 221,
"status": "working",
"name": "GFX"
}
},
{
"id": 23,
"name": "DM",
"status": {
"id": 231,
"status": "done",
"name": "DM"
}
}
]
}
]
I want to change into this array2.
var array2=[
{
"id": 1,
"name": "Johny",
"category": [
{
"id": 12,
"name": "GUI",
"data": [
{
"id": 12,
"name": "GUI",
"status": {
"id": 123,
"status": "working",
"name": "GUI"
}
},
{
"id": 21,
"name": "GUI",
"status": {
"id": 212,
"status": "Progress",
"name": "GUI"
}
}
]
},
{
"id": 13,
"name": "GFX",
"data": [
{
"id": 13,
"name": "GFX",
"status": {
"id": 124,
"status": "working",
"name": "GFX"
}
},
{
"id": 22,
"name": "GFX",
"status": {
"id": 221,
"status": "working",
"name": "GFX"
}
}
]
},
{
"id": 14,
"name": "UI",
"data": [
{
"id": 14,
"name": "UI",
"status": {
"id": 125,
"status": "working",
"name": "UI"
}
},
//null data if not in first
{}
]
},
{
"id": 23,
"name": "DM",
"data": [
//null data if not in first
{},
{
"id": 23,
"name": "DM",
"status": {
"id": 231,
"status": "done",
"name": "DM"
}
}
]
}
]
},
{
"id": 2,
"name": "Paul",
"category": [
{
"id": 21,
"name": "GUI",
"data": [
{
"id": 12,
"name": "GUI",
"status": {
"id": 123,
"status": "working",
"name": "GUI"
}
},
{
"id": 21,
"name": "GUI",
"status": {
"id": 212,
"status": "Progress",
"name": "GUI"
}
}
]
},
{
"id": 22,
"name": "GFX",
"data": [
{
"id": 13,
"name": "GFX",
"status": {
"id": 124,
"status": "working",
"name": "GFX"
}
},
{
"id": 22,
"name": "GFX",
"status": {
"id": 221,
"status": "working",
"name": "GFX"
}
}
]
},
{
"id": 14,
"name": "UI",
"data": [
{
"id": 14,
"name": "UI",
"status": {
"id": 125,
"status": "working",
"name": "UI"
}
},
//null data if not in first
{}
]
},
{
"id": 23,
"name": "DM",
"data": [
//null data if not in first
{},
{
"id": 23,
"name": "DM",
"status": {
"id": 231,
"status": "done",
"name": "DM"
}
}
]
}
]
}
]
Output should be in array2 structure.
Thanks in advance.
So you just want to have the original data as additional data attribute? This is simple using a forEach() loop in combination with the map() function:
array1.forEach((obj) => {
obj.category = obj.category.map((cat) => {
return {id: cat.id, name: cat.name, data: cat}
});
})
Hope this is what you're looking for :-)
I wrote a webapp about weather and i used weatherbit api that is just free part. i want to fetch() funk in map() loop .
i have an object which has cityname and country name . map() return every cityname and country with fetch()
how can i do that?
one more question every step of map() loop i get one JSON .. Maybe and of the loop i have 10 JSON... How can i match all Json into one Json?
here is the code..
const cityName = [
{
"id": 1,
"name": "Ingolstadt",
"country": "GE",
},
{
"id": 2,
"name": "Vienna",
"country": "AT",
},
{
"id": 3,
"name": "Istanbul",
"country": "TR",
},
{
"id": 4,
"name": "London",
"country": "GB",
},
{
"id": 5,
"name": "Ankara",
"country": "TR",
},
{
"id": 6,
"name": "Paris",
"country": "FR",
},
{
"id": 7,
"name": "Barcelona",
"country": "ES",
},
{
"id": 8,
"name": "Amsterdam",
"country": "NL",
},
{
"id": 9,
"name": "Belgrade",
"country": "RS",
},
{
"id": 10,
"name": "Munich",
"country": "GE",
}
]
//should return all city which are in object
const citySource = cityName.map((name , country) => {
// get api from weatherbit api , but i dont know ${name} and ${country} right sycntax
fetch(`https://api.weatherbit.io/v2.0/current?city=${name}&country=${country}&key=86e622607fbe4c2cb9f7f71889a4d48d`)
.then(response => response.json())
.then( users => console.log(users));
})
According to MDN:
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
Here you have working example:
const cityName = [
{
"id": 1,
"name": "Ingolstadt",
"country": "GE",
},
{
"id": 2,
"name": "Vienna",
"country": "AT",
},
{
"id": 3,
"name": "Istanbul",
"country": "TR",
},
{
"id": 4,
"name": "London",
"country": "GB",
},
{
"id": 5,
"name": "Ankara",
"country": "TR",
},
{
"id": 6,
"name": "Paris",
"country": "FR",
},
{
"id": 7,
"name": "Barcelona",
"country": "ES",
},
{
"id": 8,
"name": "Amsterdam",
"country": "NL",
},
{
"id": 9,
"name": "Belgrade",
"country": "RS",
},
{
"id": 10,
"name": "Munich",
"country": "GE",
}
]
//should return all city which are in object
const citySource = cityName.map((city) => {
fetch(`https://api.weatherbit.io/v2.0/current?city=${city.name}&country=${city.country}&key=86e622607fbe4c2cb9f7f71889a4d48d`)
.then(response => response.json())
.then( users => console.log(users));
})
I am trying to make a shopping cart API route and I am stuck with this problem because when I am using this statement $carts = \Cart::session($session)->getContent();
I get an object like this:
"cart": {
"1": {
"id": 1,
"name": "Tort cu biscuiți",
"price": 20,
"quantity": "1",
"attributes": {
"image_path": "http://127.0.0.1:8000/storage/images/AkiGKJdxjKNtyoVI034RPL1drLsMntUxLfzqZplV.jpeg"
},
"conditions": []
},
"2": {
"id": 2,
"name": "Tort cu biscuiți",
"price": 20,
"quantity": 2,
"attributes": {
"image_path": "http://127.0.0.1:8000/storage/images/IkAhenLttHWaRD58hNZ460ykWCq7q1sih3vI9H5V.jpeg"
},
"conditions": []
}
}
and I want to convet this to be array of objects. I tryied $cart->toArray(); and didn't work, also I tiyed (array) $cart and I get this:
"cart": {
"\u0000*\u0000items": {
"1": {
"id": 1,
"name": "Tort cu biscuiți",
"price": 20,
"quantity": "1",
"attributes": {
"image_path": "http://127.0.0.1:8000/storage/images/AkiGKJdxjKNtyoVI034RPL1drLsMntUxLfzqZplV.jpeg"
},
"conditions": []
},
"2": {
"id": 2,
"name": "Tort cu biscuiți",
"price": 20,
"quantity": 2,
"attributes": {
"image_path": "http://127.0.0.1:8000/storage/images/IkAhenLttHWaRD58hNZ460ykWCq7q1sih3vI9H5V.jpeg"
},
"conditions": []
}
}
}
may I know what is the problem?
You can do it manuel like this:
$carts = \Cart::session($session)->getContent();
if ($carts) {
$cartsArray = json_decode($carts);
foreach($cartsArray->cart as &$cart){
$cart = (array) $cart;
}
}
dd($cartsArray);