Transmit information to a different JavaScript framework using Vue

Question

Transmit information to a different JavaScript framework using Vue

Utilizing Vue, I create a JSON file using classic ASP from SQL Server and import the data. My objective is to showcase the received data on the page and in ApexCharts.

The structure of the HTML page, getData.js, and the JSON from dataSql.asp is outlined below:

index.html

<!DOCTYPE html>
<html lang="tr">
  <head>
    /* Code Snippet Omitted for Brevity */
  </head>
  <body>
    <section id="app"></section> 
    /* Other HTML Elements Removed for Clarity */
    <script src="getData.js"></script>
  </body>
</html>

getData.js

// JavaScript code snippet provided

dataSql.asp response JSON

        [
  {
    • "height": 350,
    • "type": "bar",
    • "graphData": [
      {
        • "category": "Bursa",
        • "series": 4
      },
      {
        • "category": "Tekirdağ",
        • "series": 3
      }
    ]
  }
]

Additional description regarding rendering data and challenges faced with Vue integration into script logic.

About finding alternative JavaScript libraries for dynamic content generation and manipulation apart from React and Angular due to complexity concerns.

If you have any suggestions or recommendations, it would be greatly appreciated!

html vue.js render apexcharts

Answer 1

Answer №1

When your AJAX function is successful, it assigns the data from sqlData to dataTable:

$.ajax({
  //...
  success: function (data) {
    that.dataTable = data.sqlData;
  }
})

However, when your component attempts to render dataTable.sqlData, there's already a problem because sqlData has been extracted in the AJAX response (dataTable is an Array):

<div v-for="dta in dataTable.sqlData">
                             ^^^^^^^ ❌

To fix this: You have two options. Either update the AJAX callback to return the full response (including sqlData):

$.ajax({
  //...
  success: function (data) {
    that.dataTable = data;
  }
})

...or modify the template and directly reference dataTable instead of dereferencing sqlData:

<div v-for="dta in dataTable">

Answer 2

When your AJAX function is successful, it assigns the data from sqlData to dataTable:

$.ajax({
  //...
  success: function (data) {
    that.dataTable = data.sqlData;
  }
})

However, when your component attempts to render dataTable.sqlData, there's already a problem because sqlData has been extracted in the AJAX response (dataTable is an Array):

<div v-for="dta in dataTable.sqlData">
                             ^^^^^^^ ❌

To fix this: You have two options. Either update the AJAX callback to return the full response (including sqlData):

$.ajax({
  //...
  success: function (data) {
    that.dataTable = data;
  }
})

...or modify the template and directly reference dataTable instead of dereferencing sqlData:

<div v-for="dta in dataTable">

Transmit information to a different JavaScript framework using Vue

Answer №1

Similar questions

Utilize the input field value in an HTML dialog box to assign it to a variable in the code.gs file with the help

The battle between Hover, Focus, and Blur modes intensifies

Partially Assessed Ajax Response

VueJS added a new object to the array, but the data did not update reactively

What causes <input> elements to vertically center when using the same technique for centering <span> elements? (The line-height of <input> does not match its parent's height)

Adjusting the width of a div element horizontally in Angular 4 and

Assess the HTML containing v-html injection

Tips for creating a star program using Angular 2+

`I noticed that the CSS appears differently when viewed in Mozilla compared to Chrome``

Pattern to filter out numeric values from a collection

Is there a way to ensure that GIFs in jQuery Mobile always start from the beginning?

The VueJS component from a third-party source is not located in the node_modules directory

Could we customize the appearance of the saved input field data dropdown?

The external javascript file is unable to recognize the HTML table rows that are dynamically inserted through an AJAX request

Enabling Javascript's power-saving mode on web browsers

Integrating blade code within blade code

Bootstrap does not control the text family, weight, and line height

I am in the process of troubleshooting why the header does not redirect correctly when clicked

Angular2's customer filter pipe allows for easy sorting and filtering of

Columns that can be resized in a right-to-left (