Send function the key of the JSON data value

Question

Send function the key of the JSON data value

Currently, I am utilizing data from a JSON object to draw lines on a canvas:

var data = { values:[
{ X: "04-28", Xt: "7:45 pm", Ys: 116, Yd: 74, Yp: 0},
{ X: "04-29", Xt: "2:00 am", Ys: 112, Yd: 73, Yp: 0},
//

The lines are drawn using jQuery with the following code:

c.lineWidth = 4;
c.strokeStyle = '#f00';
c.beginPath();
c.moveTo(getXPixel(0), getYPixel(data.values[0].Ys));
for(var i = 1; i < data.values.length; i ++) {
    c.lineTo(getXPixel(i), getYPixel(data.values[i].Ys));
}
c.stroke();

In order to draw multiple lines (including 'Yd', 'Yp', and potentially more lines in the future), I intend to create a function that can be called like this:

drawLine(4, '#f00', 'Ys');

I attempted to create the function as follows:

function drawLine(width, style, d) {
    c.lineWidth = width;
    c.strokeStyle = style;
    c.beginPath();
    c.moveTo(getXPixel(0), getYPixel(data.values[0].d));
    for(var i = 1; i < data.values.length; i ++) {
        c.lineTo(getXPixel(i), getYPixel(data.values[i].d));
    }
    c.stroke();
}

Unfortunately, this approach did not yield the desired results. While there were no errors, no lines were drawn. However, when I hardcoded 'Ys' into the function, it worked fine. How can I successfully pass this snippet of data as an argument?

javascript json function arguments

Answer 1

Answer №1

To access the property of the string value within the d variable, you should use obj[d] instead of obj.d. Here's an example function that demonstrates this concept:

function displayValue(width, style, d) {
    canvas.lineWidth = width;
    canvas.strokeStyle = style;
    canvas.beginPath();
    canvas.moveTo(getXPosition(0), getYPosition(data.values[0][d]));
    for(var i = 1; i < data.values.length; i ++) {
        canvas.lineTo(getXPosition(i), getYPosition(data.values[i][d]));
    }
    canvas.stroke();
}

And here is a simple scenario to illustrate further:

var obj = { x:5, y:10, z:15 };
console.log(obj.x);         // 5
console.log(obj['x']);      // 5    
var prop = 'y';
console.log(obj.prop);      // undefined
console.log(obj[prop]);     // 10, since prop == 'y', equivalent to:
console.log(obj['y']);      // 10

Answer 2

To access the property of the string value within the d variable, you should use obj[d] instead of obj.d. Here's an example function that demonstrates this concept:

function displayValue(width, style, d) {
    canvas.lineWidth = width;
    canvas.strokeStyle = style;
    canvas.beginPath();
    canvas.moveTo(getXPosition(0), getYPosition(data.values[0][d]));
    for(var i = 1; i < data.values.length; i ++) {
        canvas.lineTo(getXPosition(i), getYPosition(data.values[i][d]));
    }
    canvas.stroke();
}

And here is a simple scenario to illustrate further:

var obj = { x:5, y:10, z:15 };
console.log(obj.x);         // 5
console.log(obj['x']);      // 5    
var prop = 'y';
console.log(obj.prop);      // undefined
console.log(obj[prop]);     // 10, since prop == 'y', equivalent to:
console.log(obj['y']);      // 10

Send function the key of the JSON data value

Answer №1

Similar questions

Converting databases with Spring, MongoCursor, and Jackson's JsonNode

How to resolve the issue of not being able to access functions from inside the timer target function in TypeScript's

Why does my value always revert to 0 whenever I switch screens while utilizing async storage?

Obtain the value of a URL parameter on a webpage without needing to refresh the

Is there a way to delete specific information from a JSON response?

Navigating through a JavaScript object array within another object

Making a column in a Vue data grid return as a clickable button

Cover the entire screen with numerous DIV elements

Is the MUI Drawer Open 20% of the Time?

Tips on leveraging LocalStorage to update state in ReactJS

Browserify - combine external modules into a single bundle

experiencing difficulty with properly passing an array in a quicksort algorithm

Enhancing Security: Implementing Node.js API Authentication

Tips for adjusting a pre-filled form?

Why isn't my script responding to mouse events like mouseenter, mouseover, or any other mouse event?

The functionality of a Google chart is determined by the value of the AngularJS $scope

React JS - State values are not persisting and rendering properly upon clicking

Working with jQuery, parsing JSON data, and making API calls to

How can I showcase data retrieved from a function using Ajax Datatable?

Utilize Jquery to hide radio buttons, while allowing users to click on an image to display a larger version