Ben Ben - 1 year ago 80
JSON Question

how to display individual values within JSON array angualrjs

I have a json file named (for now) 0.json. I want to display certain arrays within the json object as individual values (maybe display them as badges).

here is my json:

"id": "Chinwe Chukuwogu Roy WordPress Biography Website",
"name": "Chinwe Roy Biography Website",
"practices": ["UX", "HTML WireFraming", "Front-End Development", "Custom WordPress Theming"],
"technology": ["WordPress", "HTML", "CSS", "JQuery", "TweenMax", "Inkscape", "Photoshop"],
"time": "6 Weeks",
"description": "A biography website celebrating the work of world reknowned Artist, Chinwe Chukwogu Roy",
"images": "../assets/img/ux.svg",
"header": "../assets/img/wordpress-project.svg",
"behance": ""

I call the json like this within my controller:

$http.get('app/resources/v1/projects/' + $ + '.json').success(function (details) {

$scope.details = details;



<div class="row" ng-controller="ProjectCtrl">
<ng-header class="header-directive">{{ detail.header }}</ng-header>
<div class="container">
<div class="row">
<div class="col-md-12 work-parent" ng-repeat="detail in details">
<div class="work-child">
<h1>{{ }}</h1>
<p>{{ detail.description }}</p>
<small><strong>technologies:</strong> {{ }}</small>
<small><strong>design practice:</strong> {{ detail.practices }}</small>
<small><strong>turnaround:</strong> {{ detail.time }}</small>
<ul class="social-icons">
<li class="behance"><a href="{{ detail.behance }}" target="_blank">behance</a></li>

The issue I am having is that I am unable to show e.g practices as individual values. I just get an complete array in the view when I bind detail.practices with an ng-repeat.

How would I manage this in my controller?

Answer Source

Just nest another ng-repeat inside your main one, so along the lines of:

<small ng-repeat="practice in detail.practices"><strong>design practice:</strong> {{ practice }}</small>

Or however else you want them to appear.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download