CODEWITHSUNDEEP
javascriptarraysangularjsjson
Ben
Ben

Reputation: 87

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": "https://www.behance.net/gallery/33173663/UI-Design-A-Website-Biography-Project"
  }
]

I call the json like this within my controller: 

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

    $scope.details = details;

});

HTML: 

<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>{{ detail.id }}</h1>
                <br>
                <p>{{ detail.description }}</p>
                <small><strong>technologies:</strong> {{ detail.technology }}</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>
                </ul>
            </div>
        </div>
    </div>
</div>
</div>

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?

Upvotes: 0

Views: 53

Answers (3)

heyjohnnyfunt
heyjohnnyfunt

Reputation: 89

Try to use indexes

<div class="col-md-12 work-parent" ng-repeat="{index, detail} in details">
  <div class="work-child">
    <h1>{{ detail.id }}</h1>
    <br>
    <p>{{ detail.description }}</p>
    <small><strong>technologies:</strong> {{ detail.technology }}</small>
    <small><strong>design practice:</strong> {{ detail.practices }}
       <div ng-if="detail.practices.length > 0">
          <b ng-repeat="practice in details[index].practices">{{ practice }}</b>
       </div>
    </small>
    <small><strong>turnaround:</strong> {{ detail.time }}</small>
    <ul class="social-icons">
       <li class="behance"><a href="{{ detail.behance }}" target="_blank">behance</a></li>
    </ul>
  </div>
</div>

Upvotes: 0

Theo Itzaris
Theo Itzaris

Reputation: 4681

instead of this :
<small><strong>design practice:</strong> {{ detail.practices }}</small>

you can write this , so that you get each value of the array

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

Hope that helps, good luck.

Upvotes: 0

mindparse
mindparse

Reputation: 7225

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.

Upvotes: 1

Related Questions