Is it possible to utilize the inputted value from ng-model to populate an Angular ng grid?

This plunker successfully populates a static HTML Table with data related to the search term 'Tim' from JSON Data.

    var arrItem = [];
    angular.forEach($scope.items, function (item) {
    if(item.fname === enteredValue.firstName || item.lname === enteredValue.lastName
    ||item.address === enteredValue.address && item.phone === enteredValue.phone){
        arrItem.push({
            first: item.fname,
            last: item.lname,
            address: item.address,
            phone: item.phone

        });

Now I am attempting to display this data in an NG-Grid.
This plunker demonstrates my efforts to load the Tim Search results into an NG Grid. I have tried various methods without success. Currently, I am trying to assign arrItem to $scope.source and then pass it into getPagedDataAsync. Any suggestions?

  $scope.source= arrItem;
  $scope.getPagedDataAsync($scope.source, $scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage); 

Answer №1

When setting up the gridOptions in your controller, make sure to use the correct scope variable name.

 data: 'myData',

needs to be changed to

 data: 'source',

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML / CSS / JavaScript Integrated Development Environment with Real-time Preview Window

As I've been exploring different options, I've noticed a small but impactful nuance. When working with jQuery or other UI tools, I really enjoy being able to see my changes instantly. While Adobe Dreamweaver's live view port offers this func ...

Surprising outcome when utilizing ThreeCSG library

Exploring the capabilities of the ThreeCSG library, I'm currently trying to replace the sphere or normal geometry with a custom Shape, specifically the heart shape from the 3js examples. However, I'm encountering an unusual result on the side fa ...

various locations within a hexagonal zone or figure

In my project, I am working with a simple hexagonal grid. My goal is to select a group of hexagons and fill them with random points. Here is the step-by-step process of generating these points: I start by selecting hexagons using a list of hex coordinat ...

How can we show a React JS component when clicked, without using the App.js file for display?

How can I display a component onclick in React JS without using UseState in a file other than App.js? This code will be in App.js var [clicks, setClicks] = useState(false) return( <> {clicks && &l ...

The historical records in highcharts do not include the millisecond data

One issue arises when dealing with a large amount of data in highcharts' historyData - upon zooming, the data is only present at one-second intervals, rather than milliseconds. This results in missing millisecond data when zoomed in on a chart with su ...

Validating Java Objects to Json with GSON

When using the GSON API to convert a Java object to a Json string, I need the conversion to fail if any of the annotated attributes are null. For instance: public class Order{ @SerializedName("orderId") @Expose @Required private Integer id; //getter &a ...

Exploring the Core Component of React Js with Testing

Below is how I export the root component in React JS: export default connect(mapStateToProps, mapDispatchToProps)(HomePage); This is how I import the component in my mocha test file: import HomePage from '../components/study/HomePage'; In my ...

What is the best way to generate a dynamic HTML table using Angular 6?

I need to display an array of 100 items in an HTML table with 10 rows and 10 columns. How can I achieve this using Angular? tableIndexTR = []; tableIndexTD = []; constructor(private data: TransferService) {} ngOnInit() { for (let _i = 1; _i <= ...

Is there a way for me to detect when the progress bar finishes and execute a different function afterwards?

After clicking a button in my Javascript function, the button disappears and a progress bar is revealed. How do I trigger another function after a certain amount of time has passed? $('#go').click(function() { console.log("moveProgressBar"); ...

What are the strategies for distinguishing between languages in React Native prior to mounting the component?

I had high hopes for this solution, but unfortunately it doesn't work as expected. The issue is that this.text.pupil is undefined. Could the problem possibly be related to componentWillMount? If so, how can I handle multiple languages outside of ...

"Attempting to send JSON data through Express resulted in an error due to

I have encountered an issue while trying to send JSON data to a node server using Express. Despite the fact that the JSON object is valid, the server keeps throwing an error stating 'unexpected token i'. Client Side Code: $.ajax({ contentTy ...

Combining an HTML file, a D3.js script file, and manually inputting data in the HTML file

I am relatively new to d3.js and currently working on building a simple application. However, I have encountered a roadblock in my progress. I have a separate JavaScript file named jack.js which generates a pie chart when linked with an HTML page. The Iss ...

Steps for adding buttons in a popover

I've been attempting to embed HTML attribute buttons into a popover in Bootstrap 5 using JavaScript. My goal is to create a clear button with the following function: However, the button is not displaying, only the text within the popover. https://i ...

How can I use JavaScript or CSS to identify the specific line on which certain words appear in the client's browser?

Imagine I have the following HTML structure: <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor ...

What is the best way to prioritize ng-click over ng-blur in AngularJS?

Is there a way to make the ng-click event trigger when I click the save button instead of the ng-blur event, while still maintaining the ng-blur functionality when clicking outside the button or input field? http://jsfiddle.net/tidelipop/wyjdT/ angular.m ...

Can a variable declared in wdio.conf be accessed?

Within the wdio.conf file, I have implemented a function called onPrepare where I am storing all my feature files in an array. let listOfFiles = fs.readdirSync(process.cwd() + '/features'); var featureFiles = []; listOfFiles.map((file) => { ...

Guide to displaying highcharts using external json data for numerous series

Having an issue with using angularjs and highcharts with multiple series where the data is coming from an external JSON file. When trying to access the data with a for loop using data.data[i].data, it's not working properly. Can anyone offer assistanc ...

Using the v-for variable from a slot in the parent component: A step-by-step guide

Can you help me troubleshoot this error I'm encountering while trying to utilize a variable in the slot from v-for in Vue.js? The issue of "Property or method "slide" is not defined on the instance but referenced during render. Make sure that this ...

Performing simultaneous document queries within a single API in MongoDB

I am currently working with an API written in typescript and attempting to execute parallel queries for the same document by using Promise.allSettled. However, I have noticed that it is performing poorly and seems to be running sequentially instead of in p ...

How can you append an object with a defined key to an array in Vue?

Currently developing a vue-application that includes a component for managing driving licenses. Here is an overview of my data setup: data() { return { custom_licenses: [], basic_licenses: [] } } Within my methods, I have the following l ...