JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Vue Data Grid — getting “[object][Object]” in a column
- This topic has 7 replies, 2 voices, and was last updated 1 year, 4 months ago by TomAcx.
-
AuthorPosts
-
June 8, 2023 at 1:12 am #107204TomAcxParticipant
My data is in JSON form and has the usual dates, strings, numbers, etc. — but for one property about language proficiency, like so…
{ "name": "Spanish", "levels": "Level 4" }, { "name": "Mandarin Chinese", "levels": "Level 3" }, { "name": "Hindi", "levels": "Level 4" }, { "name": "French", "levels": "Level 3" }, { "name": "English", "levels": "Level 4" }
This column shows as “[object][Object]” in its column.
I have tried various kinds of formatting, but though my local .json file has the data is valid, the data available when attempting a “columns: […]” formatFunction() or template only returns the string “[object][Object].”
Is there a fix for this?
- This topic was modified 1 year, 4 months ago by TomAcx. Reason: formatting
June 8, 2023 at 6:14 am #107206svetoslav_borislavovParticipantHi,
Can you please share your Grid’s settings?
This way it will be easier for us to resolve the problem.Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/June 8, 2023 at 7:58 pm #107207TomAcxParticipantThanks for the quick response!
I think this is what you need?
(Side issue: Note that many of my data fields have names like
Teams--Agent-hiring-3-week
when I would preferTeams: Agent hiring 3 week
but the examples don’t show how to handle colons and spaces in these names. If there’s a way, I’d like to use it.)<div>
<div> mounted: function () {</div>
<div></div>
<div> let partnerData = this.getPartnerData()</div>
<div> window.Smart(</div>
<div> “#grid”, class {</div>
<div> get properties() {</div>
<div> return {</div>
<div> columns: [</div>
<div> { label: ‘Company Name’, dataField: ‘Company–Name’, freeze: true },</div>
<div> { label: ‘Partner Code’, dataField: ‘Company–Partner code’, columnGroup: ‘company’ },</div>
<div> { label: ‘Quickbooks Vendor ID’, dataField: ‘Company–Quickbooks vendor ID’, columnGroup: ‘company’ },</div>
<div> { label: ‘Website’, dataField: ‘Company–Website’, columnGroup: ‘company’ },</div>
<div> { label: ‘Primary contact’, dataField: ‘Company–Primary-contact’, columnGroup: ‘company’ },</div>
<div> { label: ‘Primary title’, dataField: ‘Company–Primary-contact-title’, columnGroup: ‘company’ },</div>
<div> { label: ‘Primary email’, dataField: ‘Company–Primary-contact-email’, columnGroup: ‘company’ },</div>
<div> { label: ‘Primary phone’, dataField: ‘Company–Primary-contact-phone’, columnGroup: ‘company’ },</div>
<div> { label: ‘Smallest team’, dataField: ‘Teams–Smallest-team-size’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Average team’, dataField: ‘Teams–Average-team-size’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Largest team’, dataField: ‘Teams–Largest-team-size’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Can hire in 1 week’, dataField: ‘Teams–Agent-hiring-1-week’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Can hire in 2 weeks’, dataField: ‘Teams–Agent-hiring-2-week’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Can hire in 3 weeks’, dataField: ‘Teams–Agent-hiring-3-week’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Can hire in 1 month’, dataField: ‘Teams–Agent-hiring-1-month’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Full-time’, dataField: ‘Teams–Agents-percent-full-time’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div> { label: ‘Part-time’, dataField: ‘Teams–Agents-percent-part-time’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div> { label: ‘Remote’, dataField: ‘Teams–Agents-percent-remote’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div> { label: ‘On-Site’, dataField: ‘Teams–Agents-percent-on-site’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div> { label: ‘Shared’, dataField: ‘Teams–Agents-percent-shared’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div> { label: ‘Dedicated’, dataField: ‘Teams–Agents-percent-dedicated’, columnGroup: ‘teams’, cellsFormat: ‘p0’ },</div>
<div> { label: ‘Offer Shared’, dataField: ‘Teams–Offer-shared-services’, columnGroup: ‘teams’ },</div>
<div> { label: ‘Functions’, dataField: ‘Ops–Functions-performed’, columnGroup: ‘operations’ },</div>
<div> { label: ‘Geographies’, dataField: ‘Ops–Geographies-served’, columnGroup: ‘operations’ },</div>
<div> { label: ‘Skillsets’, dataField: ‘Ops–Skillsets-provided’, columnGroup: ‘operations’ },</div>
<div> { label: ‘Channels’, dataField: ‘Ops–Channels-provided’, columnGroup: ‘operations’ },</div>
<div> { label: ‘Hours of Oper.’, dataField: ‘Ops–Hours-of-operations’, columnGroup: ‘operations’ },</div>
<div> { label: ‘Other Funcs.’, dataField: ‘Ops–Other-functions-performed’, columnGroup: ‘operations’ },</div>
<div> { label: ’24/7 Oper.?’, dataField: ‘Ops–Support-24-7-operations’, columnGroup: ‘operations’ },</div>
<div> { label: ‘Languages’, dataField: ‘Ops–Languages-served’, columnGroup: ‘operations’ },</div>
<div> {</div>
<div> label: ‘Lang+Proficiency’, dataField: ‘Ops–Languages-and-proficiency’, columnGroup: ‘operations’,</div>
<div> // template: function(formatObject) {</div>
<div> // //console.log(“formatObject.value”, formatObject.value.length);</div>
<div> // //formatObject.template =<div>${formatObject.template}</div>
;</div>
<div> // }</div>
<div> },</div>
<div> ],</div>
<div> sorting: {</div>
<div> enabled: true</div>
<div> },</div>
<div> filtering: {</div>
<div> enabled: true</div>
<div> },</div>
<div> header: {</div>
<div> visible: true</div>
<div> },</div>
<div> appearance: {</div>
<div> alternationCount: 2,</div>
<div> showRowHeader: true,</div>
<div> showRowHeaderSelectIcon: true,</div>
<div> showRowHeaderFocusIcon: true,</div>
<div> allowHover: true,</div>
<div> },</div>
<div> behavior: {</div>
<div> columnResizeMode: ‘growAndShrink’,</div>
<div> allowColumnReorder: true</div>
<div> },</div>
<div> columnGroups: [</div>
<div> { label: ‘Company’, align: ‘center’, name: ‘company’ },</div>
<div> { label: ‘Agent Teams and Composition’, align: ‘center’, name: ‘teams’ },</div>
<div> { label: ‘Operations’, align: ‘center’, name: ‘operations’ }</div>
<div> ],</div>
</div><div>
<div> dataSource: new window.Smart.DataAdapter(</div>
</div>
<div>
<div> {</div>
<div> dataSource: partnerData,</div>
<div> dataFields: [</div>
<div> ‘Company–Name: string’,</div>
<div> ‘Company–Partner code: string’,</div>
<div> ‘Company–Quickbooks vendor ID: int’,</div>
<div> ‘Company–Website: string’,</div>
<div> ‘Company–Primary-contact: string’,</div>
<div> ‘Company–Primary-contact-title: string’,</div>
<div> ‘Company–Primary-contact-email: string’,</div>
<div> ‘Company–Primary-contact-phone: string’,</div>
<div> ‘Teams–Smallest-team-size: number’,</div>
<div> ‘Teams–Average-team-size: number’,</div>
<div> ‘Teams–Largest-team-size: number’,</div>
<div> ‘Teams–Agent-hiring-1-week: number’,</div>
<div> ‘Teams–Agent-hiring-2-weeks: number’,</div>
<div> ‘Teams–Agent-hiring-3-weeks: number’,</div>
<div> ‘Teams–Agent-hiring-1-month: number’,</div>
<div> ‘Teams–Agents-percent-full-time: number’,</div>
<div> ‘Teams–Agents-percent-part-time: number’,</div>
<div> ‘Teams–Agents-percent-remote: number’,</div>
<div> ‘Teams–Agents-percent-on-site: number’,</div>
<div> ‘Teams–Agents-percent-shared: number’,</div>
<div> ‘Teams–Agents-percent-dedicated: number’,</div>
<div> ‘Teams–Offer-shared-services: bool’,</div>
<div> ‘Ops–Functions-performed: string’,</div>
<div> ‘Ops–Geographies-served: string’,</div>
<div> ‘Ops–Skillsets-provided: string’,</div>
<div> ‘Ops–Channels-provided: string’,</div>
<div> ‘Ops–Hours-of-operations: string’,</div>
<div> ‘Ops–Other-functions-performed: string’,</div>
<div> ‘Ops–Support-24-7-operations: string’,</div>
<div> ‘Ops–Languages-served: string’,</div>
<div> ‘Ops–Languages-and-proficiency: string’,</div>
<div> ]</div>
<div></div>
<div> })</div>
<div> }</div>
<div> }</div>
<div> }</div>
<div> );</div>
<div></div>
<div> const grid = document.querySelector(“smart-grid”);</div>
<div> const xlsxBtn = document.querySelector(“#xlsxBtn”);</div>
<div> xlsxBtn.addEventListener(“click”, () => {</div>
<div> grid.exportData(“xlsx”);</div>
<div> });</div>
<div></div>
<div> }</div>
</div>June 8, 2023 at 8:38 pm #107208TomAcxParticipantA sample of the data I’m trying to get from the
Ops--Languages-and-proficiencies
field is below. For this, the grid would show six repetitions of[object][Object]
.[
{“name”: “Dutch”, “level”: “”},
{“name”: “English”, “levels”: “Level 4”},
{“name”: “French”, “levels”: “Level 4”},
{“name”: “Portuguese”, “levels”: “Level 3”},
{“name”: “Spanish”, “levels”: “Level 4”},
{“name”: “Standard German”, “levels”: “Level 1”}
]June 9, 2023 at 6:01 am #107210svetoslav_borislavovParticipantHi,
If I understand correctly, you are trying to assign an array as a data field.
That is not possible, the allowed data types for a data field are: ‘string’, ‘date’, ‘number’, ‘float’, ‘int’ and ‘bool’.Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/June 9, 2023 at 7:05 pm #107212TomAcxParticipantThat makes sense, though I do find that simple JSON arrays like
['Spanish','English','French']
do show up in the table fine without any special effort or handling.So I assumed there was some native ability to intake JSON, perhaps doing a silent
.stringify()
operation on it or something.June 12, 2023 at 9:48 am #107214svetoslav_borislavovParticipantHi,
The official supported data types are: ‘string’, ‘date’, ‘number’, ‘float’, ‘int’ and ‘bool’.
Yes, you can stringify the array to display the dataBest Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/June 12, 2023 at 5:10 pm #107215TomAcxParticipantThanks!
-
AuthorPosts
- You must be logged in to reply to this topic.