JSON API WebConnector for Tableau

After creating a tableau webconnector to extract data from an internal API, I used earthquakeUSGS.html as a reference (https://github.com/tableau/webdataconnector). The API responds with json data (see code below). Utilizing the "Web data connector simulator 2.0" was smooth until I encountered an issue with fetching table data. Being new to JavaScript, I suspect that my error lies in the script itself. To navigate through the data, I followed Korijn's advice on iterating through nested JSON object arrays on this post: https://stackoverflow.com/questions/15268594/iterate-through-nested-json-object-array

The Issue: It is likely related to the JavaScript iterator navigating over the json objects. If someone could review the json data (below) and examine my iterator, it would be greatly appreciated as this hurdle prevents me from successfully fetching the necessary data.

test.js

(function() {
    // Creating the connector object
    var myConnector = tableau.makeConnector();

    // Defining the schema
    myConnector.getSchema = function(schemaCallback) {
        var cols = [{
            id: "prog",
            alias: "PrognosisTime",
            dataType: tableau.dataTypeEnum.string
        }, {
            id: "start",
            alias: "Start",
            dataType: tableau.dataTypeEnum.date
        }, {
            id: "val",
            alias: "Value",
            dataType: tableau.dataTypeEnum.float
        }];

        var tableSchema = {
            id: "table",
            alias: "187",
            columns: cols
        };

        schemaCallback([tableSchema]);
    };

    // Data retrieval process
    myConnector.getData = function(table, doneCallback) {
        $.getJSON("http://myapi.com/119%2C7777/Flattened?start=today&end=today&timeZone=CET&asOf=now&aggregation=None", function(resp) {
            var feat = resp.features,
                tableData = [];
                tableData.push(
                    {"table":feat.properties.table}
                    );

            // Iterating over the JSON object
            //var SeriesId = feat.SeriesId
            for(var i = 0; i <feat.DataPoints.length; i++){
                var PrognosisTime = feat.DataPoints.PrognosisTime;
                var Start = feat.DataPoints.Start;
                var Value = feat.DataPoints.Value;
            }
            table.appendRows(tableData);
            doneCallback();
        });
    };

    tableau.registerConnector(myConnector);

    // Event listeners upon form submission by user
    $(document).ready(function() {
        $("#submitButton").click(function() {
            tableau.connectionName = "Neas"; // This will be the data source name in Tableau
            tableau.submit(); // Sends the connector object to Tableau
        });
    });
})();

json from API

[
  {
    "SeriesId": 119,
    "DataPoints": [
      {
        "PrognosisTime": null,
        "Start": "2016-08-24T00:00:00",
        "Value": 26.19
      },
      {
        "PrognosisTime": null,
        "Start": "2016-08-24T01:00:00",
        "Value": 23.9
      },
      {
        "PrognosisTime": null,
        "Start": "2016-08-24T02:00:00",
        "Value": 22.82
      }
    ]
  },
  {
    "SeriesId": 7777,
    "DataPoints": [
      {
        "PrognosisTime": null,
        "Start": "2016-08-24T00:00:00",
        "Value": 36.39
      },
      {
        "PrognosisTime": null,
        "Start": "2016-08-24T00:15:00",
        "Value": 28.81
      },
      {
        "PrognosisTime": null,
        "Start": "2016-08-24T00:30:00",
        "Value": 24.28
      }
    ]
  }
]

Answer №1

Looks like the issue lies within this specific line:

let features = resp.features

The variable 'resp' is an array in your JSON data, and there isn't a key named 'features'. To resolve this, you can either iterate over 'resp' directly or assign 'resp' to another variable like 'feat' and extract the 'DataPoints' array from it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to manage variables that are not present in a Vue.js template?

When working with vue.js templates, I often come across instances like this: {{ jobs[0].stages[0].node.name }} If a job has no stages, the entire template fails to load and vue.js admin throws this warning: Error in render: "TypeError: Cannot read prope ...

How can `localePath()` be utilized to create a dynamic route with Nuxt i18n?

I currently have this route set up in my i18n.config.js: { pages: { 'rental/_id': { nl: '/verhuur/:id', en: '/rental/:id', de: '/mietbestand/:id', }, } } When attempting to link to this page in my ...

The Angular Material Table is reporting an error: the data source provided does not conform to an array, Observable, or DataSource

Having some trouble with an Angular Material table, as I'm encountering an error preventing me from populating the grid: Error: Provided data source did not match an array, Observable, or DataSource search.service.ts GridSubmittedFilesList: IGridMo ...

What steps are necessary to create an npm package utilizing three.js without any dependencies?

I have a challenge - I am trying to create an npm package that generates procedural objects for three.js. The issue I'm facing is how to properly include three.js in my code. I attempted to establish a dependency and use something like const THREE = r ...

Manipulating arrays of objects using JavaScript

I am working with an array of objects represented as follows. data: [ {col: ['amb', 1, 2],} , {col: ['bfg', 3, 4], },] My goal is to transform this data into an array of arrays like the one shown below. [ [{a: 'amb',b: [1], c ...

What is the best way to set up secure client routes?

Welcome to my College Dashboard Project! :) I am currently utilizing Next.js to create a comprehensive dashboard system for Teachers, Students, and Administrators. The Home page serves as the central hub for logging in or signing up as any of the mention ...

Issue with ExpressJS Regex not correctly matching a path

I'm currently struggling with a simple regex that is supposed to match words consisting of letters (0-5) only, but for some reason it's not working as expected. Can anyone help me figure out the correct expression and how to implement it in Expre ...

Having trouble accessing the text in a paragraph using JavaScript executor and web driver

On a particular website, there is: <p id="tempid" value="Manual Effect">testing the test</p> String value = (String)((JavascriptExecutor) this).executeScript("return window.document.getElementById('tempid').value"); System.out.pr ...

QuickFit, the jQuery plugin, automatically adjusts the size of text that is too large

I have incorporated the QuickFit library into my website to automatically resize text. However, I am running into an issue where the text is exceeding the boundaries of its containing div with a fixed size. This is something I need to rectify. This is ho ...

Outdated Information Found in Meteor Collection

Previously, I had code that successfully made a HTTP get call from the server, utilized EJSON.parse to parse data retrieved from a JSON-formatted URL, and then added information from the parsed data to a Meteor collection. However, after updating to Meteor ...

How to Transfer Rows Between Two DevExpress Grids in ASP.NET Core

In my current ASP.NET Core project using Razor pages, I have incorporated two devexpress grids. The main objective is to select a row from one grid, click on the floating action button labeled "add", and have that selected row transferred to the grid on th ...

Guide to switching content within a DIV when the up and down buttons are pressed using JavaScript and jQuery

I have a functional code with a timeline where each event is connected to the other. There are buttons to delete and copy data, but I want to implement functionality for swapping elements when the up or down button is clicked. I have provided a sample code ...

Enhancing asynchronous loading with Axios interceptors

When utilizing vue.js along with the axios library to make requests to my API, I aim to configure it globally and display a loading message when the request takes too long. I discovered that by using axios interceptors, I can set up axios configuration on ...

Tacking the progress bar onto an array of $.ajax() calls within a Promise.all

FINAL UPDATE 25/06/20: After a thorough investigation, I discovered the root causes of why the progress bar was not functioning as intended. Firstly, dealing with $.ajax() proved to be cumbersome due to its lack of proper promise handling. To resolve this ...

Discover the most concise string within the array

Is there a way to determine the shortest string in a JavaScript array regardless of the number of elements it contains? I attempted using var min = Math.min(arr[0].length,arr[1].length,arr[2].length); to find the shortest string among 3 elements in an ar ...

Storing the model on the server with the help of Backbone and NodeJS

As a beginner in Backbone and AJAX, as well as being new to Node.js which my server is built on, I am working on saving a model using the Save method in Backbone for a webchat project for university. Right now, my goal is to send the username and password ...

Reformat a JSON file and save as a new file

I have a lengthy list of one-level JSON data similar to the example below: json-old.json [ {"stock": "abc", "volume": "45434", "price": "31", "date": "10/12/12"}, {"stock": "abc", "volume": "45435", "price": "30", "date": "10/13/12"}, {"stock": "xyz", "vo ...

Mapping through multiple items in a loop using Javascript

Typescript also functions Consider an array structured like this const elementList = ['one', 'two', 'three', 'four', 'five'] Now, suppose I want to generate components that appear as follows <div&g ...

Guide on how to showcase JSON data using vanilla JavaScript within the Laravel framework

As a beginner in Laravel, I am looking to pass JSON data from my controller using vanilla JavaScript to my view blade. However, I am unsure of the steps to accomplish this. Below is an example of my controller: public function index(Request $request) { ...

What is the best way to include multiple hostnames and pathnames in a Next.js configuration file for image assets?

My attempt to import multiple images from different hostnames for next/image is not working as expected. In my next.config.js, I have tried the following setup: module.exports = { images: { remotePatterns: [ { protocol: 'https&apos ...