Переменная Javascript не работает внутри объекта.Но попадаю на console.log

Question

Переменная Javascript не работает внутри объекта.Я вижу данные, когда я console.log(dataPondsRevenue) переменная, но получаю ошибку:

SyntaxError: отсутствует] после списка элементов`!

когда я использую его внутри узла data:[]:

$('.pondsRevenueBlock').on('click',function(){
    var block_id = $(this).attr('data-id');
    var url='{{ route('WhiteFish.client.pondsRevenueBlockWise') }}';
    $.ajax({
        url:url+'?block_id='+block_id,
    }).done(function(pondsRevenueData){
        var dataPondsRevenue = '';
        $.each(pondsRevenueData, function(index, element) {
            dataPondsRevenue+= '{value:'+element.pondTotalInvest+',name:'+element.name+'},';
        });
        console.log(dataPondsRevenue);

        var eChart_2 = echarts.init(document.getElementById('pondsRevenue'));
        var option1 = {
            tooltip : {
                backgroundColor: 'rgba(33,33,33,1)',
                borderRadius:0,
                padding:10,
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: 'rgba(33,33,33,1)'
                    }
                },
                textStyle: {
                    color: '#fff',
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    fontFamily: "'Open Sans', sans-serif",
                    fontSize: 12
                }   
            },
            // color: ['#0FC5BB', '#92F2EF', '#D0F6F5'],
            color: ['#0FC5BB', '#0FC5BB', '#5AC4CC'],
            series : [
                {
                    name: 'task',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    roseType : 'radius',
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)",
                        backgroundColor: 'rgba(33,33,33,1)',
                        borderRadius:0,
                        padding:10,
                        textStyle: {
                            color: '#fff',
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                            fontFamily: "'Open Sans', sans-serif",
                            fontSize: 12
                        }   
                    },
                    data:[
                        console.log(dataPondsRevenue);
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        eChart_2.setOption(option1);
        eChart_2.resize();
    }).fail(function (data) {
        console.log('error');
    });
});

Как я могу решить это?

Answer 1

Вы создаете строку JSON.Это может быть проанализировано в объект с помощью JSON.parse (), но это кажется ненужным из-за сложности, поскольку вы можете создать необходимый массив объектов для начала:

var dataPondsRevenue = [];
$.each(pondsRevenueData, function(index, element) {
   dataPondsRevenue.push({value: element.pondTotalInvest, name: element.name});
});

Answer 2

Используйте массив (и, необязательно, JSON.stringify он; в случае $.ajax посмотрите contentType на $ .ajax docs ), он гораздо менее подвержен ошибкам - вв вашем случае всегда есть запятая в конце, которая не является допустимым JSON:

console.log("Valid:")
console.log(JSON.parse('{ "whatever": 1 }'))
console.log("Invalid:")
console.log(JSON.parse('{ "whatever": 1, }'))

$('.pondsRevenueBlock').on('click',function(){
    var block_id = $(this).attr('data-id');
    var url='{{ route('WhiteFish.client.pondsRevenueBlockWise') }}';
    $.ajax({
        url:url+'?block_id='+block_id,
        contentType: 'application/json'
    }).done(function(pondsRevenueData){
        var dataPondsRevenue = [];
        $.each(pondsRevenueData, function(index, element) {
            dataPondsRevenue.push({
              value: element.pondTotalInvest,
              name: element.name
            })
        });
        console.log(dataPondsRevenue);

        var eChart_2 = echarts.init(document.getElementById('pondsRevenue'));
        var option1 = {
            tooltip : {
                backgroundColor: 'rgba(33,33,33,1)',
                borderRadius:0,
                padding:10,
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: 'rgba(33,33,33,1)'
                    }
                },
                textStyle: {
                    color: '#fff',
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    fontFamily: "'Open Sans', sans-serif",
                    fontSize: 12
                }   
            },
            // color: ['#0FC5BB', '#92F2EF', '#D0F6F5'],
            color: ['#0FC5BB', '#0FC5BB', '#5AC4CC'],
            series : [
                {
                    name: 'task',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    roseType : 'radius',
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)",
                        backgroundColor: 'rgba(33,33,33,1)',
                        borderRadius:0,
                        padding:10,
                        textStyle: {
                            color: '#fff',
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                            fontFamily: "'Open Sans', sans-serif",
                            fontSize: 12
                        }   
                    },
                    data: JSON.stringify(dataPondsRevenue),
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        eChart_2.setOption(option1);
        eChart_2.resize();
    }).fail(function (data) {
        console.log('error');
    });
});

Кроме того, console.log() возвращает undefined - вместо этого вы можете просто передать переменную.

Answer 3

Кажется, существует большая путаница относительно того, как создать необходимый объект данных.С кодом

$.each(pondsRevenueData, function(index, element) {
    dataPondsRevenue+= '{value:'+element.pondTotalInvest+',name:'+element.name+'},';
});

Вы создаете строку JSON .Это может быть проанализировано в объект, используя JSON.parse(), но это кажется ненужным из-за сложности, поскольку вы можете создать необходимый массив объектов для начала:

var dataPondsRevenue = [];
$.each(pondsRevenueData, function(index, element) {
    dataPondsRevenue.push({value: element.pondTotalInvest, name: element.name});
});

Затем просто присвойте dataPondsRevenue data:

...
},
data: dataPondsRevenue,
itemStyle:
...

Answer 4

Это потому, что console.log(dataPondsRevenue) - это функция, которая возвращает undefined, поэтому

data: [ console.log(dataPondsRevenue) ]

означает

data: [ undefined ]

Вы должны сделать

data: [ dataPondsRevenue ]

чтобы получить фактические данные в массив.