how to correctly setup ng-repeat with multiple received arrays

Question

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."]]}

Do you actually have a missing > in your code? (<p ng-bind="row"></p) — Alon Eitan
@AlonEitan yes, thank you, but still that doesn't solve the problem — Martin K.
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 — Alon Eitan
@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... — Martin K.
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? — Alon Eitan

Jesus Carrasco Jesus Carrasco · Accepted Answer · 2017-08-04T20:55:31

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>

how to correctly setup ng-repeat with multiple received arrays

1 Answers