从 API 循环和呈现 JSON 数据时出错

Question

我想使用 vue 和 vue-chartjs 从 API 呈现 JSON 值。条形图不是循环遍历数组并绘制完整的数组，而是仅显示前两个结果（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/