arranging items vertically on a website using html

From the Java side, I am receiving a list as [Pune, Mumbai, Delhi]. I would like to display this vertically. How can I achieve that? I initially attempted to do this in AngularJS, but for some reason, the function is not being called upon click. The desired output:

Pune
Mumbai
Delhi

Controller:

@RequestMapping(value = "/home.web", method = RequestMethod.GET, produces = {"application/xml",
            "application/json" })

    public  ModelAndView getUSCity(@RequestParam ("statechoice") String statechoice) {


        List<String> msa = new ArrayList<String>();     
        msa = msaService.getMsaCodes(statechoice);

        ModelAndView model = new ModelAndView("Home");
        model.addObject("city",msa);


        return model;
    }

JSP after removing the ng directives for Angular:

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

<!-- <script>
    var app = angular.module('myApp', []);

    function MyController($scope, $http) {
        $scope.getPersonDataFromServer = function() {
            alert("Hi");
            $http({
                method : 'GET',
                url : 'home.web'
            }).success(function(data, status, headers, config) {
                alert(data);
                $scope.cities=data;

            }).error(function(data, status, headers, config) {
                // called asynchronously if an error occurs
                // or server returns response with an error status.
            });

        };

    };
</script>
     -->
</head>

<body style="text-align: center;">
    <h4>US map</h4>
    <div>
        <img src="images/usmap.gif" alt="US MAP" width="529" height="334"
            border='0' usemap='#usimage' align="middle">
    </div>
    <div>
        <map name='usimage'>
            <area shape='polygon' coords='489,52,502,31,513,32,518,54,490,71'
                href='home.web?statechoice=ME' target="_self" alt='Maine'>
        </map>
    </div>
    <div>

        <table border="1" style="margin-top: 20px;">
            <tr style="background-color: lightgray;">
                <th>Cities</th>
            <tr>
                <td>${city}</td>
            </tr>

            </div>
</body>
</html>

When using Angular's ng-repeat, div tags were used:

   <body style="text-align: center;" data-ng-app="myApp" data-ng-controller="MyController">
<h4 > US map</h4>
<div>
<img src="images/usmap.gif" alt="US MAP" width="529" height="334" border='0' usemap='#usimage' align="middle">
</div>
<div>
<map name='usimage'>
            <area shape='polygon' coords='489,52,502,31,513,32,518,54,490,71' data-ng-click="getPersonData()" href='home.web?statechoice=ME' target="_self"  alt='Maine'>
        </map>
        </div>
        <div>

            <table  border ="1" style="margin-top: 20px;">
            <tr style="background-color:lightgray;">
                    <th>Cities</th>

                <ul>
                    <li ng-repeat="city in cities">{{city}}</li>
                </ul>

                </div>
</body>
</html>

Update - The function is now being called. However, the values are not updating.

Using routing:

<script>
    var app = angular.module('myApp', ['ngRoute']). 
    module.config(function($routeProvider){
         $routeProvider
         .when('/home.web',{
                templateUrl: 'Views/Home.jsp',
         })
    })

    function MyController($scope, $http) {

        $scope.getPersonData = function() {         
            $http({
                method : 'GET',
                url : 'home.web'
            }).success(function(data, status, headers, config) {
                alert(data);
                $scope.cities = data;
            }).error(function(data, status, headers, config) {
                console.log("error");
                // called asynchronously if an error occurs
                // or server returns response with an error status.
            });

        };

    };
</script>

Answer №1

take a look at this

https://example.com

<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>

Answer №2

You forgot to include the closing tags </table> and </tr>

  <table border="1" style="margin-top: 20px;">
    <tr style="background-color: lightgray;">
      <th>Cities</th>
    </tr>
    <tr data-ng-repeat="city in cities">
      <td>{{city}}</td>
    </tr>
    <table> 

var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
  $scope.cities=['Bengaluru','Mumbai','Hyderabad'];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h4>US map</h4>
<div>
  <img src="images/usmap.gif" alt="US MAP" width="529" height="334" border='0' usemap='#usimage' align="middle">
</div>
<div>
  <map name='usimage'>
    <!--- BEGIN: East --->
    <area shape='polygon' coords='489,52,502,31,513,32,518,54,490,71' href='home.web?statechoice=ME' target="_self" alt='Maine'>
  </map>
</div>
<div>

  <table border="1" style="margin-top: 20px;">
    <tr style="background-color: lightgray;">
      <th>Cities</th>
    </tr>
    <tr data-ng-repeat="city in cities">
      <td>{{city}}</td>
    </tr>
    <table>
</div>

Make sure to remove ModelAndView from your code

@RequestMapping(value = "/home.web", method = RequestMethod.GET, produces = "application/json")

    public List<String> getUSCity(@RequestParam ("statechoice") String statechoice) {


        List<String> msa = new ArrayList<String>();     
        msa = msaService.getMsaCodes(statechoice);

        return msa;
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is causing my Bootstrap Dropdown Menus to disappear when I work with local files?

I have been utilizing Bootstrap for about a year now, and it has been quite effective. However, I encounter the same issue every time I attempt to use the files locally: my Navbar dropdown menus do not drop down. Could someone pinpoint what mistake I am m ...

Question: How can I use the jQuery datepicker to ensure that the selected date remains in the

I recently created a webpage using a combination of HTML, PHP, and jQuery. The PHP script is designed to load all data where the date matches the one selected in the text input field generated by the jQuery datepicker. However, I encountered a problem whe ...

What caused Safari to only show half of the page?

Whenever I browse my website using Safari, I noticed that if the total size of the content on the first page is less than 100vh, Safari ends up cutting off half of the page. To fix this issue, I added a CSS rule in the body setting min-height to 110vh wh ...

Create a stunning MUI App bar with a blurred effect below a fixed Navbar

Is there a method to apply a blur effect to the background of my material-ui AppBar component, creating a visually appealing overlay below the fixed navbar? I have experimented with using filter: blur(0) but it does not achieve the desired result. I am lo ...

Improve the readability of a series of string.replace statements

When dealing with HTML code in Python, special characters need to be replaced using the following lines of code: line = string.replace(line, "&quot;", "\"") line = string.replace(line, "&apos;", "'") line = string.replace(line, "&amp ...

What are some ways to customize the appearance of React Semantic components?

Is there a way to apply CSS for react semantic UI when using create react app? I have installed semantic-ui-react and included the CSS CDN: loginForm.js: import React from "react"; import { Button, Form, Header } from "semantic-ui-react"; import styles f ...

What steps should I take to address these styling challenges?

Recently, I came across some code that uses the hspace attribute which is now considered outdated. In order to create space between elements in a widget, I am looking for a solution that involves adding 10px of space above and between the items using CSS. ...

I'm having trouble passing my jQuery variable to a PHP file using the POST method

I am trying to send a variable to the PHP file select.php using AJAX in order to populate a table based on a specific date that is taken from an input field. In my AJAX script, I have set up a function to get the value of the date when a button is clicked ...

Using AngularJS for posting data with $http.post() to a URL that differs from the project's base URL

Currently, I am working on building a mobile application in Cordova using AngularJS. My goal is to send data(parameters) through a POST request to a different project URL where my RESTful service pages are stored. Below is the code snippet that I have wri ...

Is it possible to preserve the <canvas> elements to use for future animation frames?

Currently, I am working on a graph visualization project that involves complex calculations being done on an HTML5 canvas. My goal is to create an interactive animation where the graph remains fixed, but additional elements are overlaid as the mouse moves ...

What is the technique for integrating a required file into an Angular module using Browserify?

My Angular SPA build is set up to use NPM for calling the browserify script to bundle it. To execute the build process from the terminal, you can run npm run build:js, which triggers the following script in the package.json file: "build:js": "browserify - ...

JQuery Submission with Multiple Forms

Hey everyone! I have a jQuery form with multiple fieldsets that switch between each other using jQuery. Eventually, it leads to a submit button. Can someone assist me by editing my jfiddle or providing code on how I can submit this data using JavaScript, j ...

What is the best way to capture a form submission when there are no errors?

My form includes a validation check for valid fields upon submission. Here is an example of how it is structured: <form class="form-horizontal" method="post" action="#" name="basic_validate" id="basic_validate" /> <div class="con ...

Tips on incorporating a repeating gradient instead of a linear gradient

I have the following code for a linear-gradient. Click here to view the code Is there a way to modify it to use a repeating gradient instead? The goal is to maintain the same image but with a repeating gradient effect. background-image: repeating-linear ...

Decode JSON data retrieved from a remote URL address

I am in need of assistance decoding this JSON code from a URL page. The JSON code on the URL is in the following format: {"current":{"artists_id":"55","albums_id":null,"albums_tracks_id":null},"html_current":"<li><p>Pr\u00e1v\u011b h ...

Creating a Background Cutout Effect with CSS Using Elements instead of Images

I'm working on creating a unique visual effect that simulates a "window" where the div placed above all other elements acts like a window, allowing the background color to show through. Take a look at this example for reference. My goal is to make th ...

Why are the random colors blending into the image?

After watching a tutorial on the YouTube channel Online Tutorials titled "Change Image Color Vanilla JavaScript," I am confused as to why some random colors from the click event are overlapping the image instead of just changing the color of the cat's ...

Delete the float attribute from the image when the inline-block is shifted to the bottom of the image

I have three elements in my design - a title, a paragraph, and an image. I want the image to float to the right, with the title and paragraph floating to the left and bottom, resembling "Image 1." To prevent the title from wrapping when narrowing the oute ...

Why are my elements not appearing where I want them to in absolute positioning?

Could use some help with a seemingly simple question, I just need some clarity on this issue. Background: I am working on developing a complex website and one of my ideas involves generating a series of boxes on the screen. For various reasons that are t ...

Glowing CSS animation surrounding a PNG image

.zuphologo { padding-top: 33%; padding-bottom: 2%; } .fx { box-shadow: 0px 0px 100px 4px #fff; animation: glow 1.5s linear infinite alternate; } @keyframes glow{ to { box-shadow: 0px 0px 30px 20px #fff; } } <div class="container"> ...