Error in looping and rendering JSON data from API - vue.js

Question

I want to to render the JSON values from an API using vue and vue-chartjs. The bar-chart instead of looping through the array and plot the complete array, shows just the first two results (dc:title and dc:identifier).
Using JQUERY I have integrated the script into my chart.vue component
<script>
import Chart from 'chart.js';
import JQuery from 'jquery'
let $ = JQuery
export default {
name: 'app',
mounted() {
var chart = this.$refs.chart;
const ctx = chart.getContext("2d");
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [],
datasets: [{
label: '# of Metadata',
data: [],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
var getData = function() {
$.ajax({
url: 'http://localhost:3000/ratio/total',
success: function(data) {
console.log(data[0].results);
for(var key in data[0].results[0]){
myChart.data.labels.push(data[0].results[key][0]);
myChart.data.datasets[0].data.push(data[0].results[key][1]);
}
myChart.update();
}
});
};
// get new data every 3 seconds
getData();
}
}
</script>
API JSON output
[
{
"results": [
[
"dc:title",
553
],
[
"dc:identifier",
553
],
[
"dc:subject",
553
],
[
"dc:type",
553
],
[
"dc:format",
553
],
[
"dc:description",
553
],
[
"dc:language",
553
],
[
"$",
553
],
[
"dc:relation",
553
],
[
"dc:source",
532
],
[
"dc:rights",
449
],
[
"dc:date",
21
],
[
"dc:creator",
21
],
[
"dc:publisher",
21
],
[
"dc:coverage",
21
],
[
"pico:anchor",
0
],
[
"pico:preview",
0
],
[
"dcterms:rightsHolder",
0
],
[
"pico:author",
0
],
[
"pico:materialAndTechnique",
0
],
[
"dc:isReferencedBy",
0
],
[
"dcterms:isReferencedBy",
0
],
[
"dcterms:spatial",
0
],
[
"dcterms:created",
0
],
[
"pico:producer",
0
],
[
"dcterms:medium",
0
],
[
"dcterms:extent",
0
],
[
"pico:distributor",
0
],
[
"dcterms:isPartOf",
0
],
[
"dcterms:license",
0
],
[
"pico:licenseMetadata",
0
],
[
"dcterms:alternative",
0
],
[
"dcterms:modified",
0
],
[
"dcterms:hasPart",
0
],
[
"pico:contact",
0
],
[
"pico:information",
0
],
[
"pico:service",
0
],
[
"pico:responsible",
0
],
[
"pico:isManagedBy",
0
],
[
"dcterms:provenance",
0
]
]
}
]

Answer 1

I don't think that is a valid object first off.
"results": [["dc:title",553], should be "results": [{"dc": "title", "key": 553}]
notice the curly braces { and the key missing from the second numeric prop
check this out: https://www.w3schools.com/js/js_json_objects.asp
you can run ur json through a validator as well to make sure: https://jsonformatter.curiousconcept.com/