1

I'm getting this data from the Coldfusion Framework/1 API in JSON format:

{
  "COLUMNS": [
    "PRODUCT_ID",
    "PRODUCT_NAME",
    "PRODUCT_STATUS",
    "DT_CREATED"
  ],
  "DATA": [
    [
      102,
      "Window",
      "In Production",
      "November, 02 2018 10:33:13"
    ],
    [
      105,
      "Window",
      "Delivered",
      "November, 11 2018 15:00:00"
    ],
    ETC...
  ]
}

In developer tools, using Vue tool, I got this:

  • data
    • errored: false
    • loading: true
    • windows: Object
      • COLUMNS: Array[4]
      • DATA: Array[22]

I'm using axios

new Vue({
    el: '#windows-list-data',
    data() {
      return {
      windows: null,
      loading: true,
      errored: false
    }
 },
mounted() {
  axios
    .get('https://my-server.local/index.cfm?action=api.get')
    .then( response => {
      this.windows = response.data

     })
    .catch( error =>  {
      console.log(error) 
      this.errored = true
    })
    .finally( () => this.loading = false )
}

Can someone tell me how to render the data in Vuejs in a view? thanks

Jérôme
  • 1,966
  • 4
  • 24
  • 48
dkgcb
  • 81
  • 1
  • 2
  • 9
  • Out of topic, but you should consider Vuex actions for asynchronous tasks! – Axel Nov 25 '18 at 02:39
  • serializeJSON( queryData, "struct" ); returns an array of structs instead of the query notation. This might make it easier to loop over in vue.js. As far as I know, FW/1 does not support this parameter, so you have to do it yourself by not using fw.renderData( "json", .....). – Andreas Schuldhaus Nov 25 '18 at 06:44
  • You need to `JSON.parse(response.data)`, otherwise it's just a string. – Simon Hyll Nov 25 '18 at 14:50
  • Thank you all. This was very helpful – dkgcb Nov 25 '18 at 16:35
  • You should write up an answer if that was the solution to your problem. This will help others in the future – James A Mohler Nov 26 '18 at 04:45

1 Answers1

2

seems should change

this.windows = response.data

to

let respDataStr = response.data
let jsObject = JSON.parse(respDataStr)
this.windows = jsObject
crifan
  • 12,947
  • 1
  • 71
  • 56