Trying to create a menu in new web page using data fetched from wordpress database of another site dynamically

Question

I am trying to display a menu on my page using the values from the WordPress database of another site. This is what I have done so far:

app.js

angular.module('plunker', []).controller('MainCtrl', function($scope) {
 $scope.menus = [
    {

        title: "Home",
        type: "GET",
        url:'#'
    },
    {

        title: "News",
        action: "#",
        menus: [
          {
              title: "Local", 
              type:"GET",
              action: "#"
          },
          {
              title: "Kerala",
              action: "#"
          },
          {
              title: "National",
              action: "#"
          },
          {
              title: "World",
              action: "#"
          }
        ]
    },
    {
        title: "Entertainment",
        action: "#",
        menus: [
        {
            title: "Malayalam",
            action: "#"
        },
        {
            title:"Tamil",
            action:"#"
        },
        {
            title:"Hindi",
            action:"#"
        },
        {
            title:"English",
            action:"#"
        }

      ]
    }
];
});

index.html

<!doctype html>

<html>
  <head>

    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl">
     <div id="wrapper1" class="container">
       <div id="nav1">
       <div><span></span> </div>
             <ul>
                <li ng-repeat="menu in menus" class="has-children" ng-click="changeClass(menu)" lastOrFirst="{{menu.lastOrFirst}}" >
                  <a href="{{menu.url}}">{{menu.title}} <span ></span></a>
                  <ul ng-if="menu.menus">
                   <li ng-repeat="submenu in menu.menus" class="has-children">
                      <a href="{{submenu.action}}">{{submenu.title}}</a>
                          <ul ng-if="submenu.menus" ng-class="submenu.class">
                            <li ng-repeat="subsubmenu in submenu.menus">
                              <a href="{{subsubmenu.action}}">{{subsubmenu.title}}</a>
                            </li>
                          </ul>
                    </li>

                  </ul>
                </li>
              </ul>
        </div>
    </div>
    </div>
  </body>
</html>

https://next.plnkr.co/edit/3Ai7xECU1a1EPqkoxqwI?p=preview&preview - my code in plunker.com.

The question in Detail:

I am creating a menu list in my new web page and data are taken from the WordPress database of another site.

so whenever a new menu item is added to this WordPress database it should automatically change in my page too without re-writing the code.

In this above code, the menu items and sub menu items are manually written in the JSON so whenever any new menu item is added to the WordPress database I need to add it in the code too.

so Is there any way to get the new menu items adding to the database to appear in the menu on my new web page dynamically.

Any suggestions are greatly appreciated. Thanks in advance. The new result after I change the code

This is the sample databse table im trying to fetch: Table name: wp_post sample structure of the databse

//UPDATED//

//html//

 <!DOCTYPE html>
<html>
<head>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 

<script type="text/javascript" src="<?php echo base_url();?>Assets/js/angular_app.js" ></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js" >
</script>

<script 
type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.js"></script>



<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>Assets/css/angularmenu.css" />  


</head>
<body  ng-app="menuApp">

 <div class="container">
 <div id="wrapper1" class="container" ng-controller="menuController">
       <div id="nav1" >
             <ul >
                <li ng-repeat="menu in menus" >
                  <a href="{{menu.url}}" >{{menu.post_title}}</a>
                  <ul ng-controller="subController">
                   <li ng-repeat="submenu in submenus">
                      <a href="{{submenu.action}}">{{submenu.post_title}}</a>
                    </li>
                    </ul>
                    </li>
                    </ul>
                    </div>
                    </div>
                    </div>
                    </body>
                    </html>

//app.js//

var app = angular.module('menuApp', []);

  app.controller("menuController", function($scope,$http)
  {
    var baseUrl = 'http://localhost:8080/samplepage/';
    $http.get(baseUrl+'Home/getmenu').then(function(response)
    {    
    console.log(response);
    $scope.menus = response.data;
 });
});


  app.controller("subController", function($scope,$http)
  {
    var baseUrl = 'http://localhost:8080/samplepage/';
    $http.get(baseUrl+ 'Home/getsubmenu').then(function(response)
    {
        console.log(response);
        $scope.submenus = response.data;
    });
  });

I got the main menu and sub menu through this code dynamically . but but i get drop down for all the main menu. I only want a drop- down for the News.

@ShashankVivek i changed that thank you and i will provide my code on plunkr.com — PHP Devloper
– PHP Devloper, Commented Feb 2, 2019 at 6:56
Even the menu title is fetched from the database so it not displaying properly in plunkr. please check above . i have given all the html,angular script and css . using another ng- reapeat i can create the submenu but im confused how can i put those sub menus under the news(check the image of the result). — PHP Devloper
– PHP Devloper, Commented Feb 2, 2019 at 7:37
This would also help me in seeing the response structure of API. Without seeing that I dont want to guess the object structure — Shashank Vivek
– Shashank Vivek, Commented Feb 2, 2019 at 8:57

Shashank Vivek · Accepted Answer · 2019-02-10 05:30:19Z

1

Take a look at app.js where I have used $http to make API call to the server which will provide the response in the json format. You need to call the server using $http. I hope it helps.

Here is the plunkr where I am using json to fetch the data.replace it with the server call

angular.module('plunker', []).controller('MainCtrl', function($scope,$http) {
//  $http.get('/your_wordpress_API_to_provide_menu_data/',function(response){
 $http.get('data.json').then(function(response){    
    console.log(response)
    $scope.menus = response.data;
 })
});

update:

Check out this plunkr where sub menu is activated for news only

edited Feb 10, 2019 at 5:30

answered Feb 5, 2019 at 8:16

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

PHP Devloper Over a year ago

Thank you for the response, I am working with codeigniter and i saved both app.js and data.json in Assets/js folder , Is that ok.

Shashank Vivek Over a year ago

@PHPDevloper : Yes, but you dont need to save data.json as that data would come from backend server. I hope you got the solution. If yes, please mark it as an answer

PHP Devloper Over a year ago

Thank you for responding , I almost near the expecting result , above i show the result i got by changing the code as per your suggestion. please check . I get the menu items by using that code , but my doubt is how will i create a dropdown below the news i dont see any options there.

Shashank Vivek Over a year ago

@PHPDevloper : show me the response you are getting from DB

PHP Devloper Over a year ago

Please check The new result after I change the code given above , That is the screen shot of the response getting from DB.

|

Collectives™ on Stack Overflow

Trying to create a menu in new web page using data fetched from wordpress database of another site dynamically

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related