Trying to make reusable javascript function, but the data is not returning

Question

I want to create a function that when I call it, I can give a gender and it will return me a random name. The problem is that I want it to be reusable which is where I am running into difficulty.

var Name = '';
var Gender = '';

var NameChild1(){
  var Child1Gender = 'Male'
  Child1Name = NameFunction(Child1Gender, Child1Name)
}

function NameFunction(Gender, Name) {
  var NameChance1 = Math.floor(Math.random() * 10) + 1;
  NameChance1 = NameChance1.toString();
  d3.csv('Names.csv', function(NameData) {
    var NameFilter = NameData.filter(function(d) {
      return (d.Rank == NameChance1)
    })
    if (Gender == 'Female') {
      Name = NameFilter[0]['NameFemale'];
      return (Name);
    } else if (Gender == 'Male') {
      return (Name);
    };
  });
};

The name filter does work in the if statements if I do console.log inside them - but it doesn't return past that.

Does anyone know what the problem is?

Also, this is the CSV if that helps!

Rank,NameMale,NameFemale
1,Oliver ,Amelia 
2,Jack ,Olivia 
3,Harry ,Emily 
4,George ,Isla 
5,Jacob ,Ava 
6,Charlie ,Ella 
7,Noah ,Jessica 
8,William ,Isabella 
9,Thomas ,Mia 
10,Oscar ,Poppy

Cyril Cherian · Accepted Answer · 2017-08-09 12:14:30Z

1

This function will return undefined.

function NameFunction(Gender, Name) {
  var NameChance1 = Math.floor(Math.random() * 10) + 1;
  NameChance1 = NameChance1.toString();
  d3.csv('Names.csv', function(NameData) {
    var NameFilter = NameData.filter(function(d) {
      return (d.Rank == NameChance1)
    })
    if (Gender == 'Female') {
      Name = NameFilter[0]['NameFemale'];
      return (Name);
    } else if (Gender == 'Male') {
      return (Name);
    };
  });
};

Reason d3.csv('Names.csv') is asynchronous.

So you can do something like this:

var Name = '';
var Gender = '';
function NameFunction(Gender, Name, NameData) {
  var NameChance1 = Math.floor(Math.random() * 10) + 1;
  NameChance1 = NameChance1.toString();
    var NameFilter = NameData.filter(function(d) {
      return (d.Rank == NameChance1)
    })
    if (Gender == 'Female') {
      Name = NameFilter[0]['NameFemale'];
      return (Name);
    } else if (Gender == 'Male') {
      Name = NameFilter[0]['NameMale'];
      return (Name);
    };
  });
};
var NameChild1 = function(NameData){
  var Child1Gender = 'Male'
  Child1Name = NameFunction(Child1Gender, Child1Name, NameData)
  //you can do stuff with Child1Name
}
function loadMyCSV(){
  return d3.csv('Names.csv', function(NameData) {
    NameChild1(NameData);
  }
}
loadMyCSV();

In a nut shell:

1 You first call loadMyCSV()

1.1. on success of loadMyCSV NameChild1 will be called and full parsed data is passed to the function.

1.2. NameChild1 will call NameFunction which will get the Child1Name.

Hope this helps!

answered Aug 9, 2017 at 12:14

Cyril Cherian

32.4k7 gold badges48 silver badges57 bronze badges

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

2 Comments

Jess Over a year ago

That worked great, thank you! I have to reuse the name function a few times - would there be any way of making the {NameChild1(NameData);} line into when I call loadMyCSV(); So I could write loadMyCSV(NameChild1); or something?

Cyril Cherian Over a year ago

Not clear on what you wish to achieve...can you explain it better

Kamal Raj · Accepted Answer · 2017-08-09 12:11:43Z

1

var Name = '';
var Gender = '';

var NameChild1(){
  var Child1Gender = 'Male'
  Child1Name = NameFunction(Child1Gender);
  return Child1Name;
}

function NameFunction(Gender) {
  var Name;
  var NameChance1 = Math.floor(Math.random() * 10) + 1;
  NameChance1 = NameChance1.toString();
  d3.csv('Names.csv', function(NameData) {
    var NameFilter = NameData.filter(function(d) {
      return (d.Rank.toString() == NameChance1)
    })
    if (Gender == 'Female') {
      Name = NameFilter[0]['NameFemale'];
      return (Name);
    } else if (Gender == 'Male') {
      Name = NameFilter[0]['NameMale'];
      return (Name);
    };
  });
};

answered Aug 9, 2017 at 12:11

Kamal Raj

825 bronze badges

Collectives™ on Stack Overflow

Trying to make reusable javascript function, but the data is not returning

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related