Javascript / Webix referencing objects as arrays

Question

This is primarily a Javascript / JSON question, however if anyone knows of a Webix solution, I'm open to that as well.

Background

I'm using Webix as a Javascript UI framework. Currently I'm populating a Webix Datatable with JSON data that looks something like this:

complexData = {
  "metadata": {
    "itemno": 111222333,
    "groupid": 19,
    "name": "Blah"
  },
  "configs": [
    {
      "id": 1,
      "name": "First",
      "description": "some stuff",
      "value": 222
    },
    {
      "id": 3,
      "name": "Third",
      "description": "Foo",
      "value": 333
    }
  ],
  "system": null
}

I'm init'ing my Datatable component, like this:

webix.ui({
    view:"datatable",
    columns:[
        { id:"id", header:"ID" },
        { id:"name", header:"Name" },        
        { id:"description", header:"Description", fillspace: true },
        { id:"value", header:"Value" }
    ],
    data: complexData.configs
});

Which works great.

You can see what that looks like here: https://snippet.webix.com/4jd9cobb.

As you can see, I'm just 'reaching into' complexData and referencing configs, to get the data for my component.

However, (due to processing I need to do later), I need to change my data-structure slightly. I need the objects within configs to be keyed based on their id, which can be arbitrary. This, of course, means that configs is now an object of objects, not just an array:

complexData = {
  "metadata": {
    "itemid": 111222333,
    "groupid": 19,
    "name": "Blah"
  },
  "configs": {
    "1": {
      "id": 1,
      "name": "First",
      "description": "some stuff",
      "value": 222
    },
    "3": {
      "id": 3,
      "name": "Third",
      "description": "Foo",
      "value": 333
    }
    },
  "system": null
}

This no longer renders my rows.

Here's what this looks like: https://snippet.webix.com/n8ypdeia

Details

If I console.log my working result (the array), I get this:

(2) [{…}, {…}]
  0: {id: 1, name: "First", description: "some stuff", value: 222 }
  1: {id: 3, name: "Third", description: "Foo", value: 333 }
  length: 2

My failing result (object of objects) yealds this:

{1: {…}, 2: {…}}
  1: {id: 1, name: "First", description: "some stuff", value: 222 }
  3: {id: 3, name: "Third", description: "Foo", value: 333 }

So complexData.configs is appearing to Javascript / Webix as a single object rather than a collection of objects.

So my question is this:

How can I reference complexData.configs in such a way that Javsacript / Webix knows it's a collection / or as an array?

or

Is there a way to get (mapping?) Webix to parse complexData.configs so that it recognizes the objects within as datatable rows?

Thanks.

Answer 1

There's a rather simple solution to be found in Object.values()

const complexData = {
  "configs": {
    "1": {
      "id": 1,
      "name": "First",
      "description": "some stuff",
      "value": 222
    },
    "3": {
      "id": 3,
      "name": "Third",
      "description": "Foo",
      "value": 333
    }
  }
}

console.info(Object.values(complexData.configs))

This isn't supported in any version of Internet Explorer however there are several polyfills available