How do I change HTML code after getting HTTP JSON response from Servlet

Question

I am running an Apache Tomcat Web Server with JSP/Servlets. I have a slideshow for my website that works off an html list of elements. I would like to populate this list with some JSON data that I parse after making a call to my Servlet. Normally I would do this in JQuery by changing the inner html of the list and adding each list item but I would like to use Angular JS instead. On a side note, I'm new to Angular JS.

//Note: The list should look like this when all is said and done.
<div data-ng-app="" data-ng-controller="getSlideshowProducts"> 
<ul class="bxslider" style='width: 100%;'>
    <li><img src="http://www.mywebsite.com/product_images/0003500044627.jpg" /><br>$0.75</li>
    <li><img src="http://www.mywebsite.com/product_images/0007418226991.jpg" /><br>$3.00</li>
</ul>
</div>

The JSON Data returned by the Servlet looks like this

{"items":
  [
     { "quantity":"2",
       "price":"0.75",
       "name":"Ajax Super Deegreaser Lemon Dish Liquid 14 floz",
       "upc":"0003500044627",
       "category":"Cleaning Supplies"
      },
     {
        "quantity":"2",
        "price":"3.00",
        "name":"Softsoap Hand Soap 56 floz",
        "upc":"0007418226991",
        "category":
        "Cleaning Supplies"}
    ]
}

This is my attempt at creating an app/controller to populate the list, unfortunately, halfway though I realized I couldn't figure out how to change the html/inner html of the list using angular. I have been following the W3 Schools tutorial on the subject but they weren't much help.

  //retrieves some random products for the slide show
 function getSlideshowProducts($scope,$http) {  

var items;

$http({
    url: "${pageContext.request.contextPath}/ItemServlet", 
    method: "GET",
    params: {query: "random-item-list", count: "12"}
 })
 .success(
         function(response) {
            items = angular.fromJson(response);             
         }
 );
 }

Essentially I would like to figure out the proper way of getting each element of the JSON Array and doing something like the following...I'm used to going through the array using jquery and .each but with angular it's a bit confusing.

  <li data-ng-repeat = "x in items"><img  src="img src="http://www.mywebsite.com/product_images/{{x.upc}}.jpg" /><br>{{x.price}}</li>

Why are you wanting to change the inner HTML? It takes some work but for Angular you need to get out of the JQuery mindset of doing things. — Matthew Green, Jan 08 '15 at 20:10
This appears to have been answered at http://stackoverflow.com/questions/27848608/how-do-i-change-html-code-after-getting-http-json-response-from-servlet Also you can look at the angular docs at https://docs.angularjs.org/api/ng/directive/ngBindHtml — , Jan 08 '15 at 20:16
@E.Maggini None of his code shows that he is producing HTML that needs to be inserted so unless that turns out to be the case then this is not a duplicate. — Matthew Green, Jan 08 '15 at 20:18
@MatthewGreen His question asks "How do I change HTML code" ... therefore....... — , Jan 08 '15 at 20:21
@E.Maggini Which is a different question than inserting HTML. That is why I don't say this is a duplicate. — Matthew Green, Jan 08 '15 at 20:43
When you insert something you add it. But yes, there are many ways to skin a cat, as your answer below illustrates. — , Jan 08 '15 at 21:12

score 1 · Accepted Answer · answered Jan 08 '15 at 20:56

You seem to have the general idea but you are missing the main piece, attaching your information to the scope and then using it.

So for the first part you just need to assign your returned data to the scope. That would look like this.

function getSlideshowProducts($scope,$http) {  
$http({
    url: "${pageContext.request.contextPath}/ItemServlet", 
    method: "GET",
    params: {query: "random-item-list", count: "12"}
 })
 .success(
         function(response) {
            $scope.data = response;
         }
 );
 }

From there you can now interact with your scope on the view side. So to put your various values in a repeating list could look like this.

<li data-ng-repeat = "item in data.items">
    <img src="http://www.mywebsite.com/product_images/{{item.upc}}.jpg" /><br>{{item.price}}
</li>

And that should give you a start. Here is an example of what this would look all put together.

Some of this is fairly basic Angular stuff so if you haven't looked through their tutorial or docs I would recommend that.

How do I change HTML code after getting HTTP JSON response from Servlet

1 Answers1