Use the value of a variable to find an item in array

Question

I am still having trouble using the var to identify the object in the array. Here is what I have right now:

in controller:

$scope.allbooks=[
{book1={title:"Eat Pray Love", price:"$3.99"},
{book2={title:"DaVinci Code", price:"$7.99"}}
]

$scope.pick=function(name){
     $rootScope.choice = name;
}

in html template

<ion-item ng-click="pick(book1)">

{{allbooks.choice[0].title}} <----This does not work

Used an alert to make sure choice=book1 which it does...I don't know what I am doing wrong

PLEASE HELP :(

Your allbooks assignment statement does not look like proper Javascript syntax. — jfriend00
– jfriend00, Commented Dec 3, 2015 at 4:04

Jordan Soltman · Accepted Answer · 2015-12-03 04:14:55Z

1

[
{book1={title:"Eat Pray Love", price:"$3.99"},
{book2={title:"DaVinci Code", price:"$7.99"}}
]

is not valid javascript. If you are trying to define an object literal you'll need to adjust your syntax a bit:

$scope.allbooks = [
    {title:"Eat Pray Love", price:"$3.99"},
    {title:"DaVinci Code", price:"$7.99"}
]

Now you can access each book:

$scope.allbooks[0]; // returns first book
$scope.allbooks[1]; // returns second book

answered Dec 3, 2015 at 4:14

Jordan Soltman

3,95322 silver badges33 bronze badges

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

3 Comments

MehdiN Over a year ago

I totally get what your saying about the syntax, I think I just typed it in too fast...but how do I fix this issue {{allbooks.choice[0].title}}

Jordan Soltman Over a year ago

{{ allbooks[0].title }} ?

MehdiN Over a year ago

I will try to explain my issue again...so i want to access this part of an array: {{things.book1.price}} but instead the user chooses which books price to view...so they can pick from any book from book1 to book99...so I need to replace {{things.book1.price}} with {{things.choice.price}} where choice will be assigned based on user choice

Azad · Accepted Answer · 2015-12-03 05:59:09Z

1

in controller:

$scope.allbooks=[
  {book1:{title:"Eat Pray Love", price:"$3.99"}},
  {book2:{title:"DaVinci Code", price:"$7.99"}}
];

$scope.choice = {}; //a variable to store your choice

$scope.pick=function(name){
     $scope.choice = $scope.allbooks[name];  
}

in html template

<ion-item ng-click="pick('book1')"> <!-- pass book1 as string -->

{{choice.title}}

angular.module("app", [])
  .controller("main", function($scope) {

    $scope.allbooks = {
      book1: {
        title: "Eat Pray Love",
        price: "$3.99"
      },
      book2: {
        title: "DaVinci Code",
        price: "$7.99"
      }
    };

    $scope.choice = {}; //a variable to store your choice

    $scope.pick = function(name) {
      $scope.choice = $scope.allbooks[name];
    }

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="main">

  <button ng-click="pick('book1')">Test</button>
  <!-- pass book1 as string -->

  {{choice.title}}

</div>

edited Dec 3, 2015 at 5:59

answered Dec 3, 2015 at 4:46

Azad

5,2725 gold badges32 silver badges59 bronze badges

15 Comments

Jordan Soltman Over a year ago

missed a '}' for book1

MehdiN Over a year ago

I tried but it didn't work...if i just use {{allbooks.book1.title}} it works but as soon as i try to dynamically replace it with the variable it falls apart :(

Azad Over a year ago

have you defined $scope.choice variable in your scope?

MehdiN Over a year ago

I am using $rootScope.choice instead of $scope.choice so it should be available to all the scopes...(but I might not be correct)

MehdiN Over a year ago

button does not work anymore...i had to change <ion-item ng-click="pick('book1')"> to <ion-item ng-click=pick('book1')> but it is still not working....whats crazy is that I was able to get {{choice}} to work and it showed book1 in the html file...this makes no sense

|

Collectives™ on Stack Overflow

Use the value of a variable to find an item in array

2 Answers 2

3 Comments

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related