Vue Data Grid — getting “[object][Object]” in a column

[TomAcx]

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 10 months, 3 weeks ago by TomAcx. Reason: formatting

[svetoslav_borislavov]

Hi,

Can you please share your Grid’s settings?
This way it will be easier for us to resolve the problem.

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[TomAcx]

Thanks 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 prefer Teams: 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>

[TomAcx]

A 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”}
]

[svetoslav_borislavov]

Hi,

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 Borislavov

Smart UI Team
https://www.htmlelements.com/

[TomAcx]

That 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.

 

[svetoslav_borislavov]

Hi,

The official supported data types are: ‘string’, ‘date’, ‘number’, ‘float’, ‘int’ and ‘bool’.
Yes, you can stringify the array to display the data

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[TomAcx]

Thanks!

[Author]

Posts