CODEWITHSUNDEEP
javascriptchartist.js
Timmyd
Timmyd

Reputation: 3

How to fix 'ids is not a function' error in javascript

my eventual goal is to use the array data in chartist.js to create a dashboard. I am a beginner in javascript and to programming, I do understand that I need to add variables yet for the chart. My first goal is to add more console.log to see the arrays before moving forward.

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>first chart</title>
</head>
<body>
<div id="chart" class="ct-golden-section"></div> 
<script>

fetch('https://script.google.com/macros/s/AKfycbxY1tXSC6zbwvRc330EfyBNKgE0YiLWXx6p868uJh2d/dev')

    .then(function(response) {
        return response.json();
    })
    //.then(data => console.log(data))
//declare the data variable   
    var data = {
      //set our labels (x-axis) to the Label values from the JSON data
      labels: ids.map(function(id) {
        return id.Date;
      }),
      //set our values to Value value from the JSON data
      series: ids.map(function(id) {
        return id.Weight;
      })
    };

</script>

</body>
</body>
</html>
</body>
</html>

Upvotes: 0

Views: 113

Answers (1)

Snel23
Snel23

Reputation: 1379

Upon looking at the JSON data sent back, i found that you were trying to access the data incorrectly (using map). Instead you want to directly access each array inside it's structure (Being: weight > Date, weight > Weight). Sometimes you need to analyze the objects you are receiving to retrieve the correct data

Secondly, after look at the link you posted in the comments, it looks as if you have missed a key piece of code .then(function(ids)). The full function is shown below: 

fetch('https://script.google.com/macros/s/AKfycbxY1tXSC6zbwvRc330EfyBNKgE0YiLWXx6p868uJh2d/dev')

    .then(function(response) {
        return response.json();
    })
    .then(function(ids) {  //Code that is required
        var data = {
            //set our labels (x-axis) to the Label values from the JSON data
            labels: ids.weight.Date,        //Retrieve relevant array
            //set our values to Value value from the JSON data
            series: ids.weight.Weight       //Retrieve relevant array
    }
  });

When it calls .then(function(ids)), it is waiting for the previous statement to execute, and then passing the return value of the previous call as the variable ids. In your code, ids was never defined.

Upvotes: 1

Related Questions