Leverage JSON data within an AngularJS controller

I have a JSON list in Angular that looks like this:

vm.allnews = actualNews;

After checking it with console.log, I can see that it's working fine and I am able to retrieve all news from the array list. Each news item has a title which I can display on the Angular template using the following code:

<div class="card" ng-repeat="news in newsPage.allnews">

    {{news.title}}

..

This code works as expected. However, I encounter an issue when I try to send the news title through a form. Here is what I have attempted:

 function sendTitle () {
var title = $scope.news.title;
..

Unfortunately, I receive a 'title undefined' error. Can anyone help me identify the problem and suggest a solution? Thank you.

javascriptangularjsjsonrest

Answer №1

Make sure to pass a parameter that corresponds to an object from the array.

<div class="card" ng-repeat="news in newsPage.allnews">
   <div>{{news.title}}</div>
   <div ng-click="sendTitle(news.title)">Click Here</div>
</div>

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

Uncover the secrets of retrieving data from a JSON string in PHP, even if you're not aware of

I'm checking a service to see if a person has phone numbers. It returns a json string like this: $json = '{"data":[{"tel1":"1102"},{"tel2":"3220"}],"found":true}'; After using the json_decode() function, I want to extract only the phone nu ...

phpjson

Experiencing a problem with a loop structure in my code

I've been trying to create a loop that will increase the temperature by 10 degrees every 2 minutes. However, I'm struggling to figure out how to stop the temperature at 120 degrees after 16 minutes. Any suggestions on how to solve this issue? va ...

javascriptloopsfor-loop

Anticipating the completion of post requests

I am currently working on implementing a file upload feature in Angular. I have tackled the issue of file size restrictions by creating an API endpoint that can receive file chunks. Once all the chunks are received, another endpoint needs to be triggered ...

javascriptangulartypescript

Using AJAX to invoke a REST service endpoint

I'm currently implementing a REST service call using AJAX. $(document).ready(function () { var xmml = getXmlLoginRequest(); var wsdlURL = getWSDL('search'); $.ajax({ type: "POST", url: wsdlURL ...

javascriptphpajaxrest

Navigate through each of the pictures within the folder and encode them into base64

I'm currently working on a project where I need to convert images in a folder to base64 and then store them in MongoDB. At first, I successfully converted a single image: var filename = '1500.jpg'; var binarydata = fs.readFileSync(filename ...

javascriptnode.jsexpressbase64

Surprising outcomes encountered while attempting to load a text file into an array with JavaScript

Currently, I am in the process of developing an emulator and seeking to compare opcode logs from another functional emulator. The log containing executed opcodes is prepared for comparison and follows this format: //log.txt (10000 lines long) 0 195 33 195 ...

javascriptnode.jsfs

Tips for sending a JSONObject type value in Java through Postman

Here is my Java DTO class: public class fieldProviderDTO { private JSONObject information; public JSONObject getInformation() { return information; } public void setInformation(JSONObject information) { this.information = infor ...

javajsonpostman

Having trouble getting the group hover animation to function properly in Tailwind CSS

Just starting out with tailwind css and running into a little issue. The hover animation I'm trying to apply isn't working as expected in this case. Instead of seeing the desired animated background when hovering over the group, it seems the back ...

javascriptreactjstailwind-csstailwind-in-js

When attempting to reference from a variable, you may encounter an error stating that setAttribute

In my VueJS project, I am facing an issue with dynamically adding the width attribute to an inline SVG code stored in a variable called icon. Despite having the correct SVG icon code in the variable, the setAttribute method is not working as expected and t ...

javascriptvue.jssvg

Having trouble showing Bootstrap Toasts on my website

I successfully implemented Toast functionality upon button click, but I am facing an issue where I have two buttons and I want a separate Toast to appear for each button click. How can I achieve this? Another problem I encountered is related to the docume ...

javascripthtmltwitter-bootstrapbootstrap-4toast

Selenium is unable to locate certain elements due to the JavaScript page not being fully loaded, causing issues with implicit and explicit wait functions

Confusion reigns as I navigate through this scenario. Working with Selenium 2 in C# and the browser being IE8, our application employs JavaScript for transitioning between panels, though these transitions actually represent different pages while technica ...

c#javascript.netseleniumselenium-webdriver

Remove any blank way point entries from the JSON data

Is there a way to modify this code so that if the corresponding entry box is left blank, no information on a "way point" will be included in the data? In other words, if nothing is entered for E2, I want the data to be [ { 'Way point1':(2,E1.get( ...

pythonjson

Can a package-lock.json file be created without running an npm install command?

Is there a way to create only a package-lock.json file without having to redo the npm install process? I'm looking to generate the lock file without reinstalling any of the package files. Is this achievable? ...

javascriptnode.jsnpm

npm was unable to locate the module named '../lib/npm.js'

Struggling with setting up nodejs and npm on a CentOS 7 machine without internet access. I tried copying the node-v6.2.1-linux-x64 folder with some lib modules to the machine, but it's throwing an error saying Error: Cannot find module '../lib/np ...

javascriptnode.jsreact-nativenpm

Changing the mouse cursor dynamically with Angular programming

What is the recommended approach for changing the mouse cursor programmatically in Angular? For instance: HTML: <div [style.cursor]="cursorStyle">Content goes here</div> or <div [ngStyle]="{ 'cursor': cursorStyle ...

javascriptangulartypescriptcursorng-style

Having trouble with installing NPM on Ubuntu?

I am trying to set up npm for using angular2 with laravel5.2, but encountered an issue during the installation process. Here is the error message I received: npm WARN npm npm does not support Node.js v0.10.25 npm WARN npm You should probably upgrade to a ...

angularjslaravelnpm

AngularJS and JQuery: smoothly navigate from current position to specified element

This particular directive I am currently implementing was discovered as the second solution to the inquiry found here - ScrollTo function in AngularJS: .directive('scrollToItem', function($timeout) { ...

jqueryangularjsjquery-animatescrollto

Creating dynamic images in Node.js using JavaScript without relying on HTML5 canvas

Hello everyone, I'm excited to be posting my first question on stackoverflow! Hey there, it's wabsol. I've been diving into the world of nodejs and loving every minute of it. I'm interested in creating a window and/or drawing an image ...

javascriptnode.jsimage2drendering

Tips on obtaining the data count from using the $.get method

Here is the code I'm currently working with: $.get('getstatsAccepted' + tickerid, {tickerid: tickerid}, function(data) { alert(data.length); }, 'json'); I am interested in obtaining the numbe ...

javascript

What initiates Electron after npm processes the package.json file?

As I delve into the realms of JavaScript, HTML, and Electron, a particular question has been playing on my mind - what exactly happens when you run electron . in the "scripts" -> "start" section of package.json? The mysterious way it operates sends shiv ...

javascriptnode.jsnpmelectron