Displaying data from neo4j database in vue-good table

Question

i am using a method to retrieve data from my neo4j database.I want to put the output into a vue-good table. This is the method i use

testQuery() {
  var _this=this
  // Get a session from the driver
  const session = this.$neo4j.getSession();
  var arr = [];
  var arr1 = [];
  // Or you can just call this.$neo4j.run(cypher, params)
  session
    .run("MATCH (Ind:Country {name: 'India', result: 'Winners'})<-[: TOP_SCORER_OF]-(n) RETURN n.name  AS data")
    .then(res => {
      this.data = res.records[0].get("data");
      
      console.log(res)
      //var x = JSON.parse(this.data);
       console.log(this.data)
      this.rows.push(this.data);
    })
    .then(() => {
      session.close();
    });
}

I have called vue good table like this -

<vue-good-table
      :columns="columns"
      :line-numbers="true"
      :search-options="{
      enabled: true,
      placeholder: 'Search this table'}"
      :pagination-options="{
      enabled: true,
      mode: 'records'}"
      styleClass="tableOne vgt-table"
      :selectOptions="{
      enabled: true,
      selectionInfoClass: 'table-alert__box' }"
      :rows="rows">
      <!-- <div slot="table-actions" class="mb-3">
      <b-button variant="primary" class="btn-rounded">
      Add Button
      </b-button>
      </div>-->

      <template slot="table-row" slot-scope="props">
        <span v-if="props.column.field == 'button'">
          <a href>
            <i class="i-Eraser-2 text-25 text-success mr-2"></i>
            {{ props.row.button }}
          </a>
          <a href>
            <i class="i-Close-Window text-25 text-danger"></i>
            {{ props.row.button }}
          </a>
        </span>
      </template>
    </vue-good-table>

I have defined the rows and columns like this -

  columns: [
    {
      label: "Name",
      field: "name"
    },
    {
      label: "Created On",
      field: "createdAt",
      type: "date",
      dateInputFormat: "yyyy-mm-dd",
      dateOutputFormat: "MMM Do yy",
      tdClass: "text-left",
      thClass: "text-left"
    },
    {
      label: "Percent",
      field: "score",
      type: "percentage",
      tdClass: "text-left",
      thClass: "text-left"
    }
  ],
  rows: []

i Searched online for many solutions but i keep getting this error

**TypeError:** Cannot create property 'vgt_id' on string 'shikar Dhawan'

People have answered similar questions by saying you need to convert the string to a js object, but then i get this error-

vue-good-table.vue?0ccb:237 Uncaught (in promise) SyntaxError: Unexpected token s in JSON at position 0

Could someone tell me where i am going wrong?

Hi, could your share the output of the `console.log(res)` statement please? — Andres Foronda, Jun 24 '20 at 18:04

score 1 · Accepted Answer · answered Jun 24 '20 at 21:31

So it seems you are only retrieving the name from the database, and it comes as a string. Not a JSON string so decoding it is useless. To create an object so this:

this.rows.push({ name: this.data });

This pushes an object with 1 property name and the database value to the array.

Not that you are only processing 1 record from the database. You need a loop to l loop over all records.

Displaying data from neo4j database in vue-good table

1 Answers1