0

I have problem with setting up ng-repeats in angular when I receive some arrays from php. Can anyone please explain it to me ? I would like to have one div for one position of array. Thanks for kind response and here's the code:

Angular

 <div ng-app="ReportRequest" ng-controller="InsertRequest" id="pos">
    <div ng-repeat="row in report.articles.rows" class="position articles">
       <p ng-bind="row"></p
    </div>

Angular ajax request(work's fine)

var RequestApp = angular.module('ReportRequest',[]);

RequestApp.controller('InsertRequest', function ($scope, $http) {
$http.get("functions.php", {
}).then(function success(response) {
    $scope.report = response.data.rows;
  })
});

PHP (are there any mistakes ?)

<?php

header('Content-Type: application/json');

require_once  'db_connect.php';

function retrieveArticle($conn)
{

$prep_stmt = "SELECT * FROM blog";
$stmt = $conn->prepare($prep_stmt);

if ($stmt) {
    $stmt->execute();
    $result = $stmt->get_result();
    //$num_of_rows = $result->num_rows;

    while ($row = $result->fetch_assoc()) {
        //$id = $row['id'];
        $article[] = $row['article'];
    }


}

$stmt->free_result();
$stmt->close();

return $article;
}

$articles = array(retrieveArticle($conn));
$report = array('rows' => $articles);
echo json_encode($report);

Received data: (json format) {"rows":[["Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit nec nulla at pretium. Suspendisse viverra tempus malesuada. In at imperdiet ipsum, eu ornare mi. Etiam eget massa ac est dapibus aliquam. Donec pharetra vehicula libero vulputate tristique. Nullam quam est, ultricies et varius pulvinar, hendrerit rhoncus ex. Integer urna leo, pellentesque non sapien ut, scelerisque imperdiet magna.","Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit nec nulla at pretium. Suspendisse viverra tempus malesuada. In at imperdiet ipsum, eu ornare mi. Etiam eget massa ac est dapibus aliquam. Donec pharetra vehicula libero vulputate tristique. Nullam quam est, ultricies et varius pulvinar, hendrerit rhoncus ex. Integer urna leo, pellentesque non sapien ut, scelerisque imperdiet magna.","Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit nec nulla at pretium. Suspendisse viverra tempus malesuada. In at imperdiet ipsum, eu ornare mi. Etiam eget massa ac est dapibus aliquam. Donec pharetra vehicula libero vulputate tristique. Nullam quam est, ultricies et varius pulvinar, hendrerit rhoncus ex. Integer urna leo, pellentesque non sapien ut, scelerisque imperdiet magna."]]}

9
  • Do you actually have a missing > in your code? (<p ng-bind="row"></p) Commented Aug 4, 2017 at 20:17
  • @AlonEitan yes, thank you, but still that doesn't solve the problem Commented Aug 4, 2017 at 20:20
  • What about ng-repeat="row in report"? I don't see any articles key in PHP array, and you save the rows directly to $scope.report Commented Aug 4, 2017 at 20:22
  • @AlonEitan well i edited ng-repeat but I already have $scope.report = response.data.rows; in js and it won't show up, edit when there is just "row in report" it show's me this ["Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit nec nulla at pretium. Suspendisse viverra tempus malesuada. In at imperdiet ipsum, eu ornare mi... Commented Aug 4, 2017 at 20:26
  • 1
    Last attempt to solve :) Try the following on PHP echo json_encode(array('rows' => retrieveArticle($conn))); (instead of the last 3 lines on your php code), change ng-repeat="row in report.articles.rows" to ng-repeat="row in report" and <p ng-bind="row"></p to <p ng-bind="row"></p> - Any change? Commented Aug 4, 2017 at 20:38

1 Answer 1

1

Based on your json example you provide, is an array of array. so you need to use two repeats in order to render those json i put an example with ul. Try out. This work for me.

CONTROLLER

$scope.report = {
  "rows": [
    [
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit nec nulla at pretium. Suspendisse viverra tempus malesuada. In at imperdiet ipsum, eu ornare mi. Etiam eget massa ac est dapibus aliquam. Donec pharetra vehicula libero vulputate tristique. Nullam quam est, ultricies et varius pulvinar, hendrerit rhoncus ex. Integer urna leo, pellentesque non sapien ut, scelerisque imperdiet magna.",
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit nec nulla at pretium. Suspendisse viverra tempus malesuada. In at imperdiet ipsum, eu ornare mi. Etiam eget massa ac est dapibus aliquam. Donec pharetra vehicula libero vulputate tristique. Nullam quam est, ultricies et varius pulvinar, hendrerit rhoncus ex. Integer urna leo, pellentesque non sapien ut, scelerisque imperdiet magna.",
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit nec nulla at pretium. Suspendisse viverra tempus malesuada. In at imperdiet ipsum, eu ornare mi. Etiam eget massa ac est dapibus aliquam. Donec pharetra vehicula libero vulputate tristique. Nullam quam est, ultricies et varius pulvinar, hendrerit rhoncus ex. Integer urna leo, pellentesque non sapien ut, scelerisque imperdiet magna."
    ]
  ]

}

HTML

   <ul ng-repeat="item in report.rows" class="position articles">
       <li>{{$index}}
       <ul>
         <li ng-repeat="(key, value) in item track by $index">
         {{$index + '-'+value}}
       </li>
       </ul>
    </ul>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.