call array from function jquery

Question

Im storing a little data in my jQuery. I want to call it from arrays with functions, but when I call the array it doesn't return any value. There's my JSFiddle

jQuery code

$('button').click(showInfo);
function showInfo(){
 var data = $(this).attr("dataid");
 //alert(data);
 dataArray(data);
 writeData(data);
}
function dataArray(call){
 var person1 = [{
 'name':'First Name',
 'position':'Director'
 }];
 var person1 = [{
 'name':'Second Name',
 'position':'Director'
 }];
}
function writeData(called){
 $('.person').removeClass('hidden');
 dataArray(called[0]);
 // write in divs
 $('.person .name').text(dataArray(called['name']));
 $('.person .position').text(dataArray(called['position']));
}

• Patrick Evans: dataArray function does nothing but declare two variables and then does nothing with them. Also i think you meant to have var person2 as the second variable, instead of 2 var person1 lines
• trincot: One basic thing is that if you want a function to return something you need to return something. Maybe you should just explain what you want to happen, because this code does not really reveal that.

Answer 1

You need to return something from your dataWrite call. in this case an object of objects with person data. then you can filter that by the name passed in.

$('button').click(showInfo);
function showInfo() {
 var data = $(this).attr("dataid");
 //alert(data);
 writeData(data);
}
function dataArray() {
 var persons = {
 person1: {
 name: 'First Name',
 position: 'Director'
 },
 person2: {
 name: 'Second Name',
 position: 'Director'
 }
 };
 return persons;
}
function writeData(called) {
 $('.person').removeClass('hidden');
 //alert(called);
 // write in divs
 $('.person .name').text(dataArray()[called].name);
 $('.person .position').text(dataArray()[called].position);
}

.hidden {
 display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button dataid="person1">Call person 1</button>
<button dataid="person2">Call person 2</button>
<br/>
<br/>
<div class="person hidden">
 <span>Name: </span>
 <div class="name"></div>
 <br/>
 <span>Position: </span>
 <div class="position"></div>
</div>

Answer 2

You have two problems in your code:

1. dataArray function isn't returning anything so you need to change it to:

   function dataArray(call){
    return {
    person1 :{
    name:'First Name',
    position:'Director'
    },
    person1 :{
    name:'Second Name',
    position:'Director'
    }
    }[call];
   }
   

2. you need to access the key of the returned object , and that would be:

   $('.person .name').text(dataArray(called)['name']);
   $('.person .position').text(dataArray(called)['position']);
   

here's the working fiddle