Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Node.JS How do I transfer a collection from ejs to a javascript function ?

D

dt65231

Coder
How do I transfer a collection from ejs to a javascript function ?

Тег `< a >`
HTML: 
<a style="font-weight: bold;" href="#" onclick="setMessage3('<%=articles%>', '<%=article.id%>')"><%=article.title%></a>

Тег < script >
HTML: 
<script>               
    function setMessage3(articles, id) {
        <!--  Arbitrary code ...  --- --- -->
        console.log(id);
        console.log(thisArticles[id].content);
    }
</script>

14.08.2022_10-40-48.png

Or
Тег < script >
HTML: 
<script>               
    function setMessage4(id) {                   
        let thisArticles = '<%=articles%>'; 

        console.log(thisArticles[id].content);
    }
</script>
14.08.2022_10-44-11.png
 
Sort by date Sort by votes
dt65231 said:
How do I transfer a collection from ejs to a javascript function ?

Тег `< a >`
HTML: 
<a style="font-weight: bold;" href="#" onclick="setMessage3('<%=articles%>', '<%=article.id%>')"><%=article.title%></a>

Тег < script >
HTML: 
<script>              
    function setMessage3(articles, id) {
        <!--  Arbitrary code ...  --- --- -->
        console.log(id);
        console.log(thisArticles[id].content);
    }
</script>

View attachment 1567

Or
Тег < script >
HTML: 
<script>              
    function setMessage4(id) {                  
        let thisArticles = '<%=articles%>';

        console.log(thisArticles[id].content);
    }
</script>
View attachment 1568
Click to expand...
Hey there,
you could get this done by injecting it into the js on the page. You dont need to set it as a string...
try something like this

<% if(articles)%>
<h1> <%= articles.name %> </h1>
<%} else {%>
<h1>No Title</h1>
<%}%>
 
Upvote 1 Downvote
Antero360 said:
Hey there,
you could get this done by injecting it into the js on the page. You dont need to set it as a string...
try something like this

<% if(articles)%>
<h1> <%= articles.name %> </h1>
<%} else {%>
<h1>No Title</h1>
<%}%>
Click to expand...
I understand your code.

But I don't see how this will help my problem

Although I may be wrong in my decision.

My main goal is to perform in JS:
- get a collection of `articles`;
- get the collection item `article = articles`;
- get the `article.content` property;
- display the `article.content` property in the html element of the page (Example: display in the div element);

My main goal is to execute on the `Master-Detail` page.
12.08.2022_17-53-15-2.png


Current code.
index.ejs
HTML: 
 <!doctype html>
<html lang="ru">
<head>
    <!-- Кодировка веб-страницы -->
    <meta charset="utf-8">
    <!-- Настройка viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>...</title>
    
    <!-- Bootstrap CSS (jsDelivr CDN) -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!-- Bootstrap Bundle JS (jsDelivr CDN) -->
    <!--
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    -->
</head>
<!-- <body> -->
    <body>
        <!-- class="container" -->
        <div class="container">
            
            <!-- div -->
            <div class="border border-success border-3 p-2 vh-100 d-flex flex-column">
                <!-- HEADER  --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- ---->
                <!-- <header class="py-4 text-center text-uppercase fs-4 bg-primary bg-gradient text-white">
                    Header
                    </header> -->
                    
                    <!-- ROW  --- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- --- --- -->
                    <div class="row py-3 flex-grow-1">
                        
                        <!-- LEFT MENU  --- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- -->
                        <div class="col-3 d-flex">
                            <aside class="bg-danger bg-gradient w-100 d-flex justify-content-left align-items-center text-dark fs-5">                               
                                <% if (articles.length > 0) { %>
                                    <ul>
                                        <% articles.forEach((article, index) => { %>
                                        <li>
                                            <input type="hidden" class="articles" name="articles[]" value="<%= article.id %>">     
                                            <span>
                                                <a style="font-weight: bold;" href="#"><%=article.title%></a>
                                            </span>                               
                                            <span>
                                                <a style="font-weight: bold;" href="#"><%=article.owner%></a>
                                            </span>                               
                                            <span>
                                                <a style="font-weight: bold;" href="#"><%=article.number%></a>
                                            </span>                               
                                            <span>
                                                <a style="font-weight: bold;" href="#"><%=article.pos%></a>
                                            </span>
                                            
                                            <!-- <th scope="row"><%= article.id %></th> -->                                                                       
                                            <!-- <td><%= article.title%></td> -->
                                            <!-- <td><%= article.content %></td>
                                            <td><%= article.background %></td> -->
                                            <!-- <td><%= article.owner %></td> -->
                                            <!-- <td>@<%= article.number %></td> -->
                                            <!-- <td>@<%= article.pos %></td>
                                            <td>@<%= article.lang %></td> -->
                                        </li>
                                        <%})%>
                                    </ul>
                                <%}%>
                                </ul>
                            </aside>
                        </div>
                        <!-- PLACEHOLDER  --- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- -->
                        <div class="col-9 d-flex">
                            <main class="bg-light bg-gradient w-100 d-flex justify-content-center align-items-center text-dark fs-5 border border-success border-3">
                            Placeholder
                            </main>
                        </div>
                        <!-- RIGHTBAR  --- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- -->
                        <!-- <div class="col-3 d-flex">
                            <aside class="bg-danger bg-gradient w-100 d-flex justify-content-center align-items-center text-white fs-5">
                            Right Bar
                            </aside>
                        </div> -->
                        
                    </div>
                    
                    <!-- FOOTER -->
                    <!-- <footer class="py-4 bg-info bg-gradient text-center text-uppercase fs-4 text-white">
                    Footer
                    </footer> -->
                    
                </div>
                
            </div> <!-- .container -->
            
        </body>
        </html>

SQL
SQL: 
CREATE DATABASE socka;

--
-- Структура таблицы `articles`
--
DROP TABLE IF EXISTS `articles`;
CREATE TABLE IF NOT EXISTS `articles` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `content` text,
  `background` text,
  `owner` int(11) DEFAULT NULL,
  `pos` int(11) DEFAULT '0',
  `lang` int(11) DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=275 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;


--
-- Структура таблицы `articles`
--
INSERT INTO `articles` (`id`, `title`, `content`, `background`, `owner`, `pos`, `lang`) VALUES
(1, 'Articles-1', 'Content--Articles-1', NULL, NULL, 0, 1),
(2, 'Articles-1-1', 'Content--Articles-1-1', NULL, 1, 0, 1),
(3, 'Articles-1-2', 'Content--Articles-1-2', NULL, 1, 0, 1),
(4, 'Articles-1-3', 'Content--Articles-1-3', NULL, 1, 0, 1),
(5, 'Articles-1-1-1', 'Content--Articles-1-1-1', NULL, 2, 0, 1),
(6, 'Articles-1-1-2', 'Content--Articles-1-1-2', NULL, 2, 0, 1),
(7, 'Articles-1-1-3', 'Content--Articles-1-1-3', NULL, 2, 0, 1),
(8, 'Articles-2', 'Content--Articles-2', NULL, NULL, 0, 1),
(9, 'Articles-3', 'Content--Articles-3', NULL, NULL, 0, 1),
(10, 'Articles-4', 'Content--Articles-4', NULL, NULL, 0, 1),
(11, 'Articles-5', 'Content--Articles-5', NULL, NULL, 0, 2);
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom