Creating objects dynamically in javascript issue

Question 1

Hi trying to create this array dynamically. This is the static way:

var pieData = [
 {
 value: 300,
 color:getRandomColor(),
 highlight: getRandomColor(),
 },
 {
 value: 50,
 color: getRandomColor(),
 highlight: "#fac878",
 },
 {
 value: 100,
 color: getRandomColor(),
 highlight: getRandomColor(),
 },
 {
 value: 120,
 color: getRandomColor(),
 highlight: getRandomColor(),
 }
 ];

This is what I achieved:

$.ajax({
 method: "POST",
 url: "getPieChartData"
 })
 .done(function(data){
 obj = $.parseJSON(data);
 var pieData = []; i = 0;
 $.each(obj, function(key, item) {
 pieData[i].value = item.total + " - " + item.d_name;
 pieData[i].color = getRandomColor();
 pieData[i].highlight = getRandomColor();
 i++;
 });
 });

I am getting value from my function that is not a problem. My issue is that I am getting in the console that this part:

pieData[i].value = item.total +" - " + item.d_name; TypeError: pieData[i] is undefined

What am I doing wrong? thx

Question 2

You can simple use .push() method. No meed to use indexer.

The push() method adds one or more elements to the end of an array and returns the new length of the array.

$.each(obj, function(key, item) {
 pieData.push({
 value: item.total + " - " + item.d_name,
 color : getRandomColor(),
 highlight : getRandomColor()
 });
});

Question 3

but how can I access after the ajax event ? if I put a console log it said me that is undefined ?

Question 4

@GeorgeMoldovan, A of AJAX stands for asynchronous go through stackoverflow.com/questions/14220321/… , Its a good read and will provide solution for your problem

Question 5

This code works good, but "push" isn't the solution of the problem. The solution IS the new object passed to push, but you can do it without push too, like @James Newton wrote in his answer.

Question 6

You need to create the pieData[i] object first;

var pieData = []; i = 0;
$.each(obj, function(key, item) {
 pieData[i] = {}; // added line
 pieData[i].value = item.total + " - " + item.d_name;
 pieData[i].color = getRandomColor();
 pieData[i].highlight = getRandomColor();
 i++;
});

Question 7

Before pieData[i].value .., you should first have a line:

pieData[i] = {};

Satpal 134k13 gold badges168 silver badges171 bronze badges · Accepted Answer · 2015-05-24 14:12:19Z

3

You can simple use .push() method. No meed to use indexer.

The push() method adds one or more elements to the end of an array and returns the new length of the array.

$.each(obj, function(key, item) {
 pieData.push({
 value: item.total + " - " + item.d_name,
 color : getRandomColor(),
 highlight : getRandomColor()
 });
});

Share

Improve this answer

answered May 24, 2015 at 14:12

Satpal's user avatar

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

George Moldovan

George Moldovan Over a year ago

but how can I access after the ajax event ? if I put a console log it said me that is undefined ?

2015年05月24日T14:26:29.587Z+00:00

Satpal

Satpal Over a year ago

@GeorgeMoldovan, A of AJAX stands for asynchronous go through stackoverflow.com/questions/14220321/… , Its a good read and will provide solution for your problem

2015年05月24日T14:31:29.45Z+00:00

Andrea Mattioli

Andrea Mattioli Over a year ago

This code works good, but "push" isn't the solution of the problem. The solution IS the new object passed to push, but you can do it without push too, like @James Newton wrote in his answer.

2015年05月25日T06:35:23.85Z+00:00

CollectivesTM on Stack Overflow

Creating objects dynamically in javascript issue

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related