I just want to build line chart stock price, and manage json data and put it for build chart.

If i have some json data.

[
    {
    "close": 116.59,
    "high": 117.49,
    "low": 116.22,
    "open": 116.57,
    "symbol": "AAPL",
    "volume": 46691331,
    "id": "HISTORICAL_PRICES",
    "key": "AAPL",
    "date": "2020-11-27",
  },
  // { ... }
]

And started with chart.js code

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 29, 3, 5, 1, 3],
            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: {
            y: {
                stacked: true
            }
        }
    }
});
</script>

**If i want to loop out a key named close(it's just a price) in each index from json data, and put it in data of dataset below **

 datasets: [{
            label: '# of Votes',
            data: [12, 29, 3, 5, 1, 3],

How can i do that ?

CodePudding user response：

You can loop through each object of the JSON array and push the close property value to a new array variable.

check this snippet

var arr = [
    {
        "close": 116.59,
        "high": 117.49,
        "low": 116.22,
        "open": 116.57,
        "symbol": "AAPL",
        "volume": 46691331,
        "id": "HISTORICAL_PRICES",
        "key": "AAPL",
        "date": "2020-11-27",
    },
    {
        "close": 114.59,
        "high": 117.49,
        "low": 116.22,
        "open": 116.57,
        "symbol": "AAPL",
        "volume": 46691331,
        "id": "HISTORICAL_PRICES",
        "key": "AAPL",
        "date": "2020-11-27",
    },
    {
        "close": 11.59,
        "high": 117.49,
        "low": 116.22,
        "open": 116.57,
        "symbol": "AAPL",
        "volume": 46691331,
        "id": "HISTORICAL_PRICES",
        "key": "AAPL",
        "date": "2020-11-27",
    }
];

var dataset = [];

arr.forEach((value, key)=>{
    dataset.push(value.close);
});

console.log(dataset);

CodePudding user response：

var arr = [
    {
    "close": 116.59,
    "high": 117.49,
    "low": 116.22,
    "open": 116.57,
    "symbol": "AAPL",
    "volume": 46691331,
    "id": "HISTORICAL_PRICES",
    "key": "AAPL",
    "date": "2020-11-27",
},
    {
    "close": 105.3,
    "high": 117.49,
    "low": 116.22,
    "open": 116.57,
    "symbol": "AAPL",
    "volume": 46691331,
    "id": "HISTORICAL_PRICES",
    "key": "AAPL",
    "date": "2020-11-27",
},
];

var data = arr.filter(item => item?.close).map(item => item.close);

console.log(data);