How to filter Multiple arrays with one array and fetch it onto html

Hi,

I am using json feed from google sheet, the json is not really organized so using a loop function to fetch it onto different arrays

These arrays are fetched onto html cards using $.each loop function

the code is in this js fiddle
https://jsfiddle.net/mohalmah/wtydLo3b/9/

I would like to create a function that filters those arrays based on week array

Scenario:

user click a button “November”
then the function will filter all the array values that have “Nov” in it then filter the other arrays (Content,…etc) that has the same location of “Nov” values

then fetch the respective cards to the html

JS:

 var week = ['Nov 1','Nov 2','Dec 1','Dec 2','Jan 1','Jan 2'];
 var content = [1,2,3,4,5,6]
 
 $.each(week.slice(), function(i, data) {
                  var ul_data = [


                  '<div class="card">'+
            '<div class="card-image" style="background-image: url(https://picsum.photos/600/100)"></div>'+
            '<div class="card-content">'+
                '<p>Week '+ week[i] +'</p>'+
                '<h1>Cultural Topic</h1>'+
               
              
                '<p> Content'+content[i]+'</p>'+
       
                    '</div>'+
        '</div>'
      
      
        
 ];

            $("#recentActivities").append(ul_data);
            
        });

html

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Card</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
  <link rel="stylesheet" href="css/main.css">
</head>
  <body>
           
    <div id="recentActivities"></div>    
      
  </body>
  
   <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
1 Like

Thanks for your warm welcoming

I have tried a bit, but most of the solutions I found was by filtering the array map

In my case I have so many separate arrays, I don’t want to convert it to array map … since I need to scale this to a larger number of arrays in different project.

1 Like

Sorry if I am using wrong terms lol, I am still learning

But I mean this kind of arrays, it is like a table

const users = [
  { name: 'John', age: 34 },
  { name: 'Amy', age: 20 },
  { name: 'camperCat', age: 10 }

My arrays are just like:
var week = [week1, week2, week3]
var content = [C1,C2,C3]

1 Like

Yeah I was thinking to convert my arrays onto single array like this
but I have 8 arrays as a result from the the json parsing function from google sheet

and in another project I might have more arrays
Also I need to put those arrays in the fetching loop function each array will have specific position as in the js fiddle https://jsfiddle.net/mohalmah/wtydLo3b/9/

Still not sure If it is easy to convert several arrays to single one and whether or not I can do the html fetching.

1 Like

Thanks for replying
In this Jsfiddle https://jsfiddle.net/mohalmah/wtydLo3b/9/
is a demo of my original code
In the original code instead of week, content arrays
there are:

            var week = []; // the leftmost column of the Google Sheets
            var ctopic = []; // second-left column
            var clink = []; // third-left column
            var rnews = []; // fourth-left column
            var nlink = []; // fifth-left column
            var tapp = []; // sixth column
            var rlink = []; // seventh column
            var username = []; // last column

and those arrays are fetched onto the html using .each loop function

   $.each(week.slice(), function(i, data) {
                var ul_data = [

                    '<div class="column">' +

                    '<div class="flex-container">' +

                    '<div class="card">' +
                    '<div class="card-image" style="background-image: url(https://website/users/photo/'+username[i]+'?sz=600)"></div>' +
                    '<div class="card-content">' +
                    '<p>Week ' + week[i] + '</p>' +
                    '<h1>Cultural Topic</h1>' +


                    '<div class="text">' + ctopic[i] + '</div>' +
                    '<div class="read-more">' +
                    ' <a class="button" href="' + clink[i] + '" target="_blank">Read Article</a>' +
                    '</div>' +
                    

                    '<div class="subtitle">Recent News</div>' +
                    '<div class="text">' + rnews[i] + '</div>' +
                    '<div class="read-more">' +
                    ' <a class="button" href="' + nlink[i] + '" target="_blank">Read Article</a>' +
                    '</div>' +
                    '<hr>' +
                    '<div class="card-details">' +
                    '<div class="card-details-inner">' +
                    '<div class="options">' +
                    '<div class="comments">' +
                    '<a href="http://who/' + ldap[i] + '" target="_blank">' +
                    '<i class="fa fa-user-o"></i>By ' + username[i] + '</a>' +
                    '</div>' +
                    '<div class="likes">' +
                    '<a href="#!">' +
                    '<i class="fa fa-mobile"></i> + tapp[i] + </a>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +

                    '</div>'
                ];
$("#recentActivities").append(ul_data);
1 Like

I’m going to agree with Randell, I don’t see the need for an array for each column. The sheets API should be giving you a good JSON object to work with…

I recently played with it as a project for a friend and to learn React hooks, but seem applicable to what you are doing, i think?

Basically get a JSON payload from Google Sheets and then use that data to create ‘cards’.

When the page loads, do a single fetch call and get the JSON information & save too a single array such as masterData. Each row is now an array inside masterData… then filter as needed (i.e. masterData[i][0].slice(0, 3) === "Nov"), then map those items to create the “cards”.

Here is a live version of what I’m talking about, you can type in the input (or use the checkboxes) to see the Array.filter.map working: https://pjonp.github.io/gsheet-cards

Is this kind of what you are going for?

main source for above link: https://github.com/pjonp/gsheet-cards/blob/master/src/App.js

(Again, this is with React and I’ve never tried with vanilla JS or JQuery so I’m not sure how that will update the DOM as changed or if you’d need to remove the others)

But it seems to me like you want to go: Array.filter.map

Hope this helps

1 Like