AngularJS: Take a single item from an array and add to scope

Question

I have a ctrl that pulls a json array from an API. In my code I have an ng-repeat that loops through results.

This is for a PhoneGap mobile app and I'd like to take a single element from the array so that I can use it for the page title.

So... I'm wanting to use 'tool_type' outside of my ng-repeat.

Thanks in advance - I'm just not sure where to start on this one.

Example json data

[{  "entry_id":"241",
    "title":"70041",
    "url_title":"event-70041",
    "status":"open",
    "images_url":"http://DOMAIN.com/uploads/event_images/241/70041__small.jpg",
    "application_details":"Cobalt tool bits are designed for machining work hardening alloys and other tough materials. They have increased water resistance and tool life. This improves performance and retention of the cutting edge.",
    "product_sku":"70041",
    "tool_type": "Toolbits",
    "sort_group": "HSCo Toolbits",
    "material":"HSCo8",
    "pack_details":"Need Checking",
    "discount_category":"102",
    "finish":"P0 Bright Finish",
    "series_description":"HSS CO FLAT TOOLBIT DIN4964"},
    ..... MORE .....

Ctrl to call API

// Factory to get products by category
    app.factory("api_get_channel_entries_products", function ($resource) {
        var catID = $.url().attr('relative').replace(/\D/g,'');

        return $resource(
            "http://DOMAIN.com/feeds/app_productlist/:cat_id",
            {
                cat_id: catID
            }
        );
    });

    // Get the list from the factory and put data into $scope.categories so it can be repeated
    function productList ($scope, api_get_channel_entries_products, $compile) {

        $scope.products_list = [];

        // Get the current URL and then regex out everything except numbers - ie the entry id
        $.url().attr('anchor').replace(/\D/g,'');

        $scope.products_list = api_get_channel_entries_products.query();

    }

michael · Accepted Answer · 2014-01-16 15:41:53Z

1

Angular works as following:

Forgiving: expression evaluation is forgiving to undefined and null, unlike in JavaScript, >where trying to evaluate undefined properties can generate ReferenceError or TypeError.

http://code.angularjs.org/1.2.9/docs/guide/expression

so you only need to write:

<title>{{products_list[0].tool_type}}</title>

if there is a zero element the title will be the tool_type, if not, there is no title.

answered Jan 16, 2014 at 15:41

michael

16.4k8 gold badges57 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashton Six · Accepted Answer · 2014-01-16 15:41:56Z

0

Assuming you want to select a random object from the list to use something like this should work:

$scope.product-tool_type = products_list[Math.floor(Math.random()*products_list.length)].tool_type

Then to display the result just use

<h1>{{product-tool_type}}</h1>

Or alternatively:

<h1>{{products_list[Math.floor(Math.random()*products_list.length)].tool_type}}</h1>

answered Jan 16, 2014 at 15:41

Ashton Six

5136 silver badges21 bronze badges

1 Comment

T2theC Over a year ago

Thanks for your response Ashton. Although I am sure this method would work, I have selected Michaels answer as it is a little more concise. Thanks for posting - I'm sure I'll be using that somewhere!

Collectives™ on Stack Overflow

AngularJS: Take a single item from an array and add to scope

Example json data

Ctrl to call API

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Example json data

Ctrl to call API

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related