JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid Vue Data Grid — getting “[object][Object]” in a column

Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #107204
    TomAcx
    Participant

    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
    #107206

    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/

    #107207
    TomAcx
    Participant

    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>

    #107208
    TomAcx
    Participant

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

    #107210

    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/

    #107212
    TomAcx
    Participant

    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.

     

    #107214

    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/

    #107215
    TomAcx
    Participant

    Thanks!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.