assign name to array of arrays

Question

$(function() {
    $.get("https://spreadsheets.google.com/feeds/list/1VC633BXpMElJjRWvIRuZIP7UrEhuw6BdscnrV2heox0/1/public/full?alt=json", function(data) {
    var entry = data.feed.entry;
    var getKeys = Object.keys(entry[0]).slice(6);
    arr = getKeys.map(title => {
      return entry.map((el) => {
        return el[title].$t;
      }).filter((el) => {
        return el.trim();
      });
    });
    console.log(getKeys);
    console.log(arr);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Code above will return data from google sheet into array of arrays. I've been stuck on assigning the value from getKeys to each arr group to return a new arr value:

var arr = [
  gsx$fruits = ["apple", "banana"], 
  gsx$animals = ["monkey", "dog", "cat", "bear"], 
  gsx$numbers = ["one", "two", "three", "four"]
]

...this way I can be able to access a specific group not just by index position. Thanks for your help!

You can't name array elements, use an object { fruits: [...], animals: [...], numbers: [...]} — Barmar
– Barmar, Commented Nov 4, 2020 at 1:10

3limin4t0r · Accepted Answer · 2020-11-04 02:57:40Z

I've made a bit of an overhaul, but here is another option:

$(async function() {
  const data = await $.get("https://spreadsheets.google.com/feeds/list/1VC633BXpMElJjRWvIRuZIP7UrEhuw6BdscnrV2heox0/1/public/full?alt=json");
  
  const arrays = {};
  for (const entry of data.feed.entry) {
    for (const key in entry) {
      if (key.slice(0, 4) != "gsx$") continue;
      if (!entry[key].$t.trim()) continue;

      const name = key.slice(4); // optional, you could also use `key`
      if (!arrays[name]) arrays[name] = [];
      arrays[name].push(entry[key].$t);
    }
  }
  
  console.log(arrays);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This solution first creates an object arrays which will hold the different arrays. I then loop through both the data.feed.entry values and for each entry I will loop through the keys. If the key does not start with "gsx$" or if the associated value is an empty string after trimming I will skip to the next iteration.

If we have not skipped, remove the first 4 characters from key and assign this new value to name (optional). Then check if arrays contains the property name, if not assign the arrays[name] to an empty array.

Lastly push the value into the array.

I tried to make this answer understandable, if you have any question don't be afraid to comment.

Wei Su · Accepted Answer · 2020-11-04 02:03:37Z

1

First thing you need to know is arrays in javaScript are just a specialized form of object, and indexes are integer type property names, so if you want access an element from an array not just by indexes but also property names, you can just use computed properties to map these values to different names.

const keys = ['fruits', 'animals', 'numbers']
const data = [
  ["apple", "banana"],
  ["monkey", "dog", "cat", "bear"],
  ["one", "two", "three", "four"]
];

data.forEach((item, index, array) => array[keys[index]] = item);

console.log(data);
console.log(data[0]);
console.log(data['fruits']);

Though it can solve your problem, it mutates the original array. If you need to access elements with property names, I recommend you use another array method reduce, in this way you can get a new form of data, and keep the original array untouched.

const keys = ['fruits', 'animals', 'numbers']
const data = [
  ["apple", "banana"],
  ["monkey", "dog", "cat", "bear"],
  ["one", "two", "three", "four"]
];


const newFormData = data.reduce((acc, cur, index) => {
  return { ...acc,
    [keys[index]]: cur
  }
}, {});

console.log(data);
console.log(newFormData);

edited Nov 4, 2020 at 2:03

answered Nov 4, 2020 at 1:50

Wei Su

6564 silver badges9 bronze badges

4 Comments

88willr Over a year ago

Thanks Sir! this should serve my purpose since my objective is just to call a specific group...

88willr Over a year ago

Hi sir, if it's not too much to ask, if it's possible for you to convert my existing code into the format on your solution #2. For now, I can settle for the first solution... thanks

88willr Over a year ago

I'm trying to follow the logic but having a hard time understanding it... since my skills are into css only...

Wei Su Over a year ago

@88willr, reduce is a bit of confusing if it's your first time to use it, check the explanation about reduce on MDN, here's the link

Collectives™ on Stack Overflow

assign name to array of arrays

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related