Поле JSON API Django извлекает объект, который я не могу использовать .map для анализа и последующего построения диаграммы

У меня есть сериализованное поле API Django, содержащее данные базы данных JSONField, которые создают диаграмму (подтверждено, что эти данные работают на моем сервере Flask), но я не могу использовать те же данные, взятые из API Django

'''

//    data.data.linechart: "[{'index': 129, 'Strategy': 28.893}, {'index': 1304, 'Strategy': 33.331}]"

fetch(url)
        .then(response => response.json())
        .then(data => {

        var dataArray = Object.keys(data.data.linechart).map(function(key) {
            return [key, data.data.linechart[key]];
          });

          // Convert the array of key-value pairs to a format that supports map
          var mapData = dataArray.map(function(item) {
            return { index: item[0], Strategy: item[1] };
          });

          const series = [
            {
              name: 'Strategy',
              data: mapData
            }
          ];

    //Apex Chart
    var optionsChart = {
        series: [{
            name: 'New Data',
            data: series 
        }],

Что я здесь упускаю?

Функция Fetch извлекает сериализованные данные API в виде объекта, и приведенное выше преобразование не работает. Сталкивались ли другие с такой же проблемой?

Я пробовал:

  1. JSON.parse(данные),
  2. JSON.stringify(данные),
  3. Снимаем скобки: const массив данных = data2.данные.линейная диаграмма.заменяем('[', "").заменяем(']', ");
  4. изменяем data.data.linechart на data.data, а затем изолируем linechart = "[{'индекс': 129, 'Стратегия': 28.893}, {'индекс': 1304, 'Стратегия': 33.331}]"

но я не могу преобразовать данные диаграммы в формате JSON из объекта - без разделения строки JSON на отдельные символы...

Ответом на этот вопрос было терпение. Ответ, конечно, был прост, теперь, когда я знаю, как к нему подступиться.

  • Сначала я проверил полученные данные и подтвердил, что это строка с "typeof"
  • Затем я обнаружил, что JSON в базе данных заключен в одинарные кавычки, поэтому смотрите исправление для двойных кавычек ниже - и @Serhiy Fomenko указал на решение json.dumps, которое также может сработать.
  • Text.replace позволил мне выполнить JSON.parse - шаг 3, который создает массив, с которым может работать .map ... и все готово. Надеюсь, это поможет...

'''

fetch(url)
        .then(response => response.json())
        .then(data => {
         console.log("data", data);
        console.log("jsonchartData", data.data.jsonchartData);

        // test that JSONdata is a string
         console.log("jsonchartData tests", typeof data.data.jsonchartData, typeof JSON.stringify(data.data.jsonchartData));

        var lineChartData = data.data.jsonchartData;
       // parsing this string requires double-quotes, not single
        lineChartData = lineChartData.replace(/'/g, '"');
        console.log('JSON string:', lineChartData);

        try {
          var parsedData = JSON.parse([lineChartData]);  // this creates an array that can be mapped
          console.log('Parsed data:', parsedData);

          if (Array.isArray(parsedData)) {
            console.log('Parsed data is an array');
            var xLabel = parsedData.map(d => d.xLabel);
            var yLabel = parsedData.map(d => parseFloat(d.yLabel.toFixed(2)));

            console.log("xLabel", xLabel);
            console.log("yLabel", yLabel);
          } else {
            console.log('Parsed data is not an array');
          }
        } catch (e) {
          console.error('Error parsing JSON:', e);
        }
Вернуться на верх