How to populate and render the json having array of object in angularjs

Question

I have a simple array of object that contains again array,that I need to call and populate with ng repeat in angularjs. Here I need to populate the sublink in a

tag.The output should come one after other like

Project1a
Project1b
Project1c
Project1d
Project1e

but now the output is coming like

["Project1a","Project1b","Project1c","Project1d","Project1e"]

Here is the code below with html and angularjs.

html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in records">{{x.sublink}}</p> 
</div

script

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records =[{
        "project_id": "1001",
        "project_name": "Project1",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager1",
        "duration": "3 Years",
        "team_size": "10",
        "sublink": ["Project1a", "Project1b", "Project1c", "Project1d", "Project1e"]
    }]


});

<div ng-repeat="x in records">
    <p ng-repeat="link in x">{{link.sublink}}</p>
</div>

its not working

You need a second nested ng-repeat for the sublinks. ng-repeat="link in x.sublink" — Lex
– Lex, Commented Mar 24, 2019 at 16:36
<div ng-repeat="x in records"> <p ng-repeat="link in x">{{link.sublink}}</p> </div> its not working — carreankush
– carreankush, Commented Mar 24, 2019 at 16:40
That's why he said link in x.sublink, not link in x. After that it's {{link}} only, not {{link.sublink}} — baao
– baao, Commented Mar 24, 2019 at 16:42

baao · Accepted Answer · 2019-03-24 16:53:46Z

You are looping over x but need to loop over x.sublink

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="x in records">

    <p ng-repeat="link in x.sublink">
      {{link}}
    </p>
  </div>
</div>

var BaseApp = angular.module('myApp', ['ngResource']);

BaseApp.run(function($rootScope) {

})

BaseApp.controller("myCtrl", function($scope) {
  $scope.records = [{
    "project_id": "1001",
    "project_name": "Project1",
    "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
    "project_manager": "Manager1",
    "duration": "3 Years",
    "team_size": "10",
    "sublink": ["Project1a", "Project1b", "Project1c", "Project1d", "Project1e"]
  }]


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.0.5/angular-resource.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="x in records">

    <p ng-repeat="link in x.sublink">
      {{link}}
    </p>
  </div>
</div>

Collectives™ on Stack Overflow

How to populate and render the json having array of object in angularjs

html

script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

html

script

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related