'How to get data from API for only chosen categories

I have an app, it uses an external api for data http://newsapi.org/v2/top-headlines?category=alpha&apiKey=APIKEY

this external API shows data for several categories: http://newsapi.org/v2/top-headlines?category=beta&apiKey=APIKEY

http://newsapi.org/v2/top-headlines?category=gamma&apiKey=APIKEY

http://newsapi.org/v2/top-headlines?category=theta&apiKey=APIKEY

My app has user login and select which category they prefer. Its a multiselect control. Based on the selection of the categories, I need to show data from those. Eg: if user selected alpha and beta and save it. Then the homepage should show NEWS from those two categories only in one list

I am using Node JS Express and Mongo with vanilla JS

Following is some code I wrote, but unable to make it work.

index.js

    router.get('/homepage', auth, async(req,res)=>{
    const alpha= req.user.alpha
    const beta = req.user.beta 
    const gamma= req.user.gamma
    const theta= req.user.theta
    if (alpha== 'yes'){
            var url = 'http://newsapi.org/v2/top-headlines?category=alpha&apiKey=APIKEY';
            const news_alpha =await axios.get(url)    
    }
    if (beta == 'yes'){
        var url = 'http://newsapi.org/v2/top-headlines?category=beta&apiKey=APIKEY';
        const news_beta =await axios.get(url)    
    }
    if (gamma== 'yes'){
        var url = 'http://newsapi.org/v2/top-headlines?category=gamma&apiKey=APIKEY';
        const news_gamma =await axios.get(url)
   }     
    if (theta== 'yes'){
        var url = 'http://newsapi.org/v2/top-headlines?category=theta&apiKey=APIKEY';
        const news_theta =await axios.get(url)
           
}

//HERE I AM TRYING TO SEND ALL VALID CATEGORIES DATA TO UI. NOT SURE IF ITS RIGHT WAY TO DO!
    try {
        res.status(200).render('home',{articles:news_alpha.data.articles, articles:news_beta.data.articles, articles:news_gamma.data.articles, articles:news_theta.data.articles, user: req.user, id: req.user._id})
        
    } catch (error) {
        if(error.response){
            console.log(error)
        }
    }
});

homepage.ejs

    <div >
        <% articles.forEach(function(article,index){ %>
          <% if ((typeof article.url=='object') || (typeof article.title=='object') || (typeof article.urlToImage=='object') || (typeof article.content=='object')){ %>
            <% } else{ %>
              <a href="<%- article.url %>" target="_blank" class="news-box Hover-effect">
                <!-- <img src="<%- article.urlToImage %>" alt="Image"> -->
                <h3>
                  <%- article.title %>
                </h3>
                <p>
                  <%- article.content.replace(/<[^>]+>/g, '') %>
                </p>
                <br>

              </a>
            <% } %>
          <% }) %>
    </div>

PAGE WHERE USER SELECTS THEIR PREFERENCES OF CATEGORIES they are basically radio button with YES / NO

<body>
    <div>

    
        <form method="PUT" id="update_user" action="/homepage">
        <div class="form-group">
            <h3> <label for="name" class="text-dark">preferences</label> </h3>
            <input type="hidden" name="id" value="<%= id %>">
            
            
        </div>


        <div class="form-group">
            <label for="alpha" class="text-dark">alpha</label>
                <input type="radio" id="radio-2" name="alpha" value="yes" <%= alpha== 'yes' ? 'checked' : '' %>>
                <label for="radio-2" class="radio-label">Yes</label>            
                <input type="radio" id="radio-3" name="alpha" value="no"  <%= alpha== 'no' ? 'checked' : '' %> >
                <label for="radio-3" class="radio-label">No</label>  
        </div>

        <div class="form-group">
            <label for="beta" class="text-dark">beta</label>
                <input type="radio" id="radio-2" name="beta" value="yes" <%= beta== 'yes' ? 'checked' : '' %>>
                <label for="radio-2" class="radio-label">Yes</label>            
                <input type="radio" id="radio-3" name="beta" value="no"  <%= beta== 'no' ? 'checked' : '' %> >
                <label for="radio-3" class="radio-label">No</label>  
        </div>

        <div class="form-group">
            <label for="gamma" class="text-dark">gamma</label>
                <input type="radio" id="radio-2" name="gamma" value="yes" <%= gamma== 'yes' ? 'checked' : '' %>>
                <label for="radio-2" class="radio-label">Yes</label>            
                <input type="radio" id="radio-3" name="gamma" value="no"  <%= gamma== 'no' ? 'checked' : '' %> >
                <label for="radio-3" class="radio-label">No</label>  
        </div>

        <div class="form-group">
            <label for="theta" class="text-dark">theta</label>
                <input type="radio" id="radio-2" name="theta" value="yes" <%= theta== 'yes' ? 'checked' : '' %>>
                <label for="radio-2" class="radio-label">Yes</label>            
                <input type="radio" id="radio-3" name="theta" value="no"  <%= theta== 'no' ? 'checked' : '' %> >
                <label for="radio-3" class="radio-label">No</label>  
        </div>

So to summarise, the objective is user selects categories, one or few or all from preferences. Based on each preference there are some news articles linked in external API therefore I need to bring all the news articles for the preferences marked as YES, consolidate the response and send to UI for display.

Can you guys help me? Please let me know!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to get data from API for only chosen categories

Sources

Related Questions