Ошибка зацикливания и рендеринга данных JSON из API

Question

Я хочу визуализировать значения JSON из API, используя vue и vue-chartjs. Гистограмма, вместо того, чтобы циклически перемещаться по массиву и отображать полный массив, показывает только первые два результата (dc: title и dc: identifier).

Используя JQUERY, я интегрировал скрипт в свой компонент chart.vue

<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

[
  {
    "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

Я не думаю, что это правильный объект в первую очередь.

"results": [["dc:title",553], должно быть "results": [{"dc": "title", "key": 553}]

обратите внимание на фигурные скобки { и ключ, отсутствующий во втором числовом подпорке

, проверьте это: https://www.w3schools.com/js/js_json_objects.asp Вы также можете запустить свой JSON через валидатор, чтобы убедиться: https://jsonformatter.curiousconcept.com/