Using jQuery to pass dynamic values to a plugin function

Question

Using jQuery to pass dynamic values to a plugin function

I'm currently utilizing the JSONTable plugin and attempting to dynamically pass values to the 'head' and 'json' parameters by extracting them from an array object. For instance, I aim to load a new json file, convert it to a JavaScript object, and extract the updated 'head' and 'json' attributes.

$("#dataTable").jsonTable({
    head : ['#','Operating System','Market Share'],
    json : ['id', 'name', 'share']
});

I've encountered similar issues while working with other plugins. Even though this might seem straightforward, I have yet to discover how to achieve this. One approach I tried was passing the entire function as a string, but that only converted it into a string rather than a function object. Any assistance on this matter would be greatly appreciated. Thank you!

javascript json

Answer 1

Answer №1

If you want to display the properties of the initial element in the array as column headers, you can refer to them as such (here is a test):

HTML:

<textarea id="data" cols="50" rows="8">[
{"id": 1, "name": "Apple", "price": 1200},
{"id": 2, "name": "Samsung", "price": 1000},
{"id": 3, "name": "Google", "price": 800}
]</textarea><br />
<input type="button" id="generateButton" value="Generate Table" /><br/>
<table id="itemTable"></table>

JavaScript:

function generateTable(tableId, jsonData) {
    var data = JSON.parse(jsonData),
        columns = [];

    if (!(data instanceof Array) || data.length === 0)
        return;

    for (var key in data[0]) {
        if (data[0].hasOwnProperty(key))
            columns.push(key);
    }

    $("#" + tableId)
        .html("<table id='" + tableId + "'><thead></thead><tbody></tbody></table>")
        .jsonTable({
            head: columns,
            json: columns,
        })
        .jsonTableUpdate({
            source: data
        });
}

$("#generateButton").click(function () {
    generateTable("itemTable", $("#data").val());
});

Output:

id   name      price
1    Apple     1200
2    Samsung   1000
3    Google    800

Feel free to modify the values in the <textarea> and click the button to see the changes reflected in the table. Remember to update column names throughout the JSON document if you decide to change them.

Answer 2

If you want to display the properties of the initial element in the array as column headers, you can refer to them as such (here is a test):

HTML:

<textarea id="data" cols="50" rows="8">[
{"id": 1, "name": "Apple", "price": 1200},
{"id": 2, "name": "Samsung", "price": 1000},
{"id": 3, "name": "Google", "price": 800}
]</textarea><br />
<input type="button" id="generateButton" value="Generate Table" /><br/>
<table id="itemTable"></table>

JavaScript:

function generateTable(tableId, jsonData) {
    var data = JSON.parse(jsonData),
        columns = [];

    if (!(data instanceof Array) || data.length === 0)
        return;

    for (var key in data[0]) {
        if (data[0].hasOwnProperty(key))
            columns.push(key);
    }

    $("#" + tableId)
        .html("<table id='" + tableId + "'><thead></thead><tbody></tbody></table>")
        .jsonTable({
            head: columns,
            json: columns,
        })
        .jsonTableUpdate({
            source: data
        });
}

$("#generateButton").click(function () {
    generateTable("itemTable", $("#data").val());
});

Output:

id   name      price
1    Apple     1200
2    Samsung   1000
3    Google    800

Feel free to modify the values in the <textarea> and click the button to see the changes reflected in the table. Remember to update column names throughout the JSON document if you decide to change them.

Using jQuery to pass dynamic values to a plugin function

Answer №1

Similar questions

What is the proper way to utilize the value of a Node.js promise in a different function?

The Ajax GIF Loader is not functioning in the latest versions of Internet Explorer and Firefox, but it is running smoothly in

Step-by-step guide on building an admin dashboard for your React application

Building a single-page app optimized for mobile viewing with Foundation framework

React - utilize a variable as the value for an HTML element and update it whenever the variable undergoes a change

Incorporating the Revolution Slider jQuery plugin within a Vue.js environment

Ignoring empty lists in Jackson - A simple guide

"Exploring the world of Vue.js and videojs: refreshing the video

Setting Start and End Dates in Bootstrap Vue Datepicker to Ensure End Date is After Start Date

What is the best way to create a scrollable tbody in an HTML table using React?

Utilize JavaScript and jQuery to extract the selected text's context from a webpage

Angular, JavaScript, and PHP are three powerful programming languages that

JavaScript combined with a dynamic menu, a customized current link style using CSS, and a site built on PHP

Getting callback data from a function in the AWS SDK without using asynchronous methods

Execute GTmetrix report retrieval using React Native

angularjs dynamically display expression based on controller value

The Ajax request is successfully looping through multiple files, however, it is not properly sending them to the server. As a result, only one file

Deselect the checkbox that was initially selected when an alternative checkbox option has been chosen

Custom cellRenderer prevents Ag Grid's autoHeight and wrapText features from functioning properly

managing arrays in JavaScript with multiple tables