how to send multiple object values as a single object to a javascript function

Question

I am working on angularjs application. I'm iterating the response and displaying in a table, when user click on the table row information i'm passing the json value to the java script where i will process further and display information.

<tr ng-repeat="info in responseData">
<td>
    {{info.id}}</td>
<td>
    <a href="javascript:void(0)"
       ng-click="showDetails(x.product1Data)">
    product1 Data</a>
</td>
<td style="width:15%;text-align: center;">
    <a href="javascript:void(0)"
       ng-click="showDetails(x.product2Data)">
    product2 Data </a>
</td>
<td style="width:15%;text-align: center;">
    <a href="javascript:void(0)"
       ng-click="showDetails(x.product3Data)">
    product3 Data</a>
</td>
<td>
    <a href="javascript:void(0)"
       ng-click="showDetails(..)">Show All Product Data </a>
</td>
</tr>

In the above html code, when user click on Show All Product Data i want to pass x.product1Data,x.product2Data,x.product3Data value to showDetails(..). Any inputs on how to pass all 3 objects in showDetails when user click on Show All Product Data

js code:

$scope.showDetails = function(productInfo){
//productInfo contains the product information
agularjs.forEach(productInfo,function(value,key){

}
}

Same way as you pass parameters into a normal funaction. showDetails(x.product1Data,x.product2Data,x.product3Data) — Kavindra
– Kavindra, Commented Mar 22, 2018 at 2:51

Matt Way · Accepted Answer · 2018-03-22 02:58:24Z

1

You could create a function called showDetailSet(), which takes an array as an argument. It could do something like (you will have to scope it obviously):

function showDetailSet(products) {
    products.forEach(p => showDetails(p))
}

Then you would call it like ng-click="showDetailSet([x.product1Data, x.product2Data, x.product3Data])"

answered Mar 22, 2018 at 2:58

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

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

1 Comment

dexter Over a year ago

+1 - I was looking your solution now, can i pass two arguments to showDetailSet(.) like showDetailSet(products,brand) where argument brand is String and products hold [x.product1Data, x.product2Data, x.product3Data] ..

CertainPerformance · Accepted Answer · 2018-03-22 02:51:01Z

0

You could simply call all showDetails directly:

ng-click="showDetails(x.product1Data); showDetails(x.product2Data); showDetails(x.product3Data);">

You could also pass multiple arguments as you would to a normal function, but you would have to refactor showDetails for that.

answered Mar 22, 2018 at 2:51

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

4 Comments

dexter Over a year ago

I have to pass only one argument to showDetails which should have x.product1Data,x.product2Data,x.product3Data values. @CertainPerformance

CertainPerformance Over a year ago

Ok, then do it the first way instead, just put all showDetails calls in the last ng-click.

dexter Over a year ago

That's not working, i'm opening a new window with information when user click on showDetails, keeping all showDetails in ng-click is making to open window 3 times..

CertainPerformance Over a year ago

Sounds like it is working, but you want it to do something else. You should probably refactor showDetails (or make a completely new function) and figure out what you want to be displayed where when Show All Product Data is clicked.

R. StackUser · Accepted Answer · 2018-03-22 03:10:04Z

0

Depending on how your Json array is formatted, you may be able to push a concatenated variable such as

showDetails(x.product1Data.concat(x.product2Data.concat(x.product3Data)));

answered Mar 22, 2018 at 3:10

R. StackUser

2,0854 gold badges21 silver badges28 bronze badges

Comments

sison kk · Accepted Answer · 2018-03-22 04:20:49Z

Normally parameters can be send by following code,

showDetails(x.product1Data,x.product2Data,product3Data)

dont know why this is not solving your problem, if it is not working then follow bellow,

Just pass info you will get all the productData in the showDetails function

 <tr ng-repeat="info in responseData">
    <td>
        {{info.id}}</td>
    <td>
        <a href="javascript:void(0)"
           ng-click="showDetails(info.product1Data,$index)">
        product1 Data</a>
    </td>
    <td style="width:15%;text-align: center;">
        <a href="javascript:void(0)"
           ng-click="showDetails(info.product2Data,$index)">
        product2 Data </a>
    </td>
    <td style="width:15%;text-align: center;">
        <a href="javascript:void(0)"
           ng-click="showDetails(info.product3Data,$index)">
        product3 Data</a>
    </td>
    <td>
        <a href="javascript:void(0)"
           ng-click="showDetails(info,-1)">Show All Product Data </a>
    </td>
    </tr>

and in controller

$scope.showDetails = function(productInfo,index){
  if(index==-1)
   {
        // do your stuff for show all details
   }
   else{
      //productInfo contains the product information
       agularjs.forEach(productInfo,function(value,key){

       }
   }
}

Collectives™ on Stack Overflow

how to send multiple object values as a single object to a javascript function

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related