AngularJS Transfer of Post Data

I am having some trouble getting HTTP Post data to transfer from a PHP database call.  Here are the pieces of code (all of these code pieces are shortened to only show the most critical parts to diagnose):

HTML Part One
This is set up so that a previous selection displays a drop down menu of options that come from a correctly working DB call. When the user hits Submit, it runs the AngularJS call below to do another DB call to request additional data.
                    <p>
                     <select name="devo" ng-model="devo" class="form-control">  
                          <option value="">Select a Devotional</option>  
                          <option ng-repeat="devo in devos" value="{{devo.dvID}}">{{devo.dv_title}}</option>  
                     </select>  
					</p> 
               		<p>
               		    <button type="submit" id="frmsbmt" class="btn btn-primary btn-xl wow tada" ng-disabled="devoFm.$invalid" ng-click="submitDv(devo)">
                                View Devotional<i class="fa fa-sign-in"></i>
                  		</button>
					</p>

Open in new window


HTML Part Two
When the data comes back from the HTTP post call, it then displays in another part of the screen. I am correctly obtaining the data for these fields with the exceptions noted below.
<div ng-repeat="dir in dirct">
      <h4>{{dir.dv_title}}</h4>
      <h1>{{dir.dv_talent}}</h1>
      <p>{{dir.dv_overview}}</p>
</div>

Open in new window


Angular Controller
      $scope.submitDv = function (devo) { 
		  $http.post("direct.php", {'plTpe':'diracc', 'dvID':devo})  
           .success(function(data){ 
                $scope.dirct = data;
			  	console.log(data);
			  	$scope.load = false;
           });
      }

Open in new window


PHP Database Call
The call to the database returns the correct JSON array with data like this (as displayed by console.log for data):
[…]
0: {…}
"$$hashKey": "object:31"
dvID: "15"
dv_file: "w15_SteppingOut(Rothschild) "
dv_overview: "<p>As your relationship with God deepens, He may ask you to go somewhere that doesnt make sense</p>"
dv_photo: "YVwalk3.jpg"
dv_pic: "jennifer-rothschild"
dv_plan: "3"
dv_talent: "Jennifer Rothschild"
dv_title: "Stepping Out"
__proto__: Object { … }
length: 1
__proto__: Array []

Open in new window


HERE ARE MY PROBLEMS


  • It works fine as long as the character count in the field dv_overview is less than around 120 characters. Once over 120 it crashes and doesn't return anything.
  • If the info being return contains HTML formatting characters (e.g. <b>Bold</b> or <p>paragraph</p> tags), they are not correctly converted to but instead are displayed as is.
  • Although the return of data will always be a single record in an array, the only way I can get this data to display is by using a "ng-repeat" (<div ng-repeat="dir in dirct">) to get it to display. Is there an alternative way of displaying?

What do I need to do to fix these problems.

Thank you.
Paul KonstanskiProject SpecialistAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Paul KonstanskiProject SpecialistAuthor Commented:
Had a co-worker provide some answers.

For bullet #3: $scope.dirct = data[0];  That should get you the first entry in the array and flatten out your data.

For bullet #1: It isn't a 120 character limit, it is that there are some non-standard characters in the way it was saved in the database that are not converting well and are crashing. I need to sanitize those somehow.

Still working on how to pass the HTML via angular. (Bullet #2)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Paul KonstanskiProject SpecialistAuthor Commented:
For bullet #1: I added this to the php script where it builds the array:

	$arr = array_map('utf8_encode', $dummy);
	$output = array($arr);
        echo json_encode($output); 

Open in new window


Where $dummy is the original array from the database query.  This suggestion came from: https://stackoverflow.com/questions/20694317/json-encode-function-special-characters

For bullet #2, solved this way:
<p ng-bind-html="renderHtml(dir.dv_overview)"></p>

Open in new window

This worked because I already had $sce loaded.
0
Paul KonstanskiProject SpecialistAuthor Commented:
An associate provided answers to me in a timely fashion.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Databases

From novice to tech pro — start learning today.