Include a variable within the tags parameter of the Flickr API

My Angular code snippet is up and running:

var url ="https://api.flickr.com/services/rest/?method=flickr.photos.search& 
api_key=c4e2f731926eefa6fe1d3e9c2c9f9449&tags=coffee&format=json&jsoncallback=JSON_CALLBACK";

$http.jsonp(url).then(function(response) {
    console.log(response.data);},function(){console.log('Error retrieving JSON data')}
);

Yet, I'm stuck on how to pass a variable's value to tags instead of hardcoding it as coffee or chocolate. Is there a more efficient way to structure all the necessary information (api_key, format, tags) in an object and append it to the URL?

javascriptangularjs

Answer №1

To include tags in the GET parameter, you can utilize the config.params object:

var apiURL = "https://api.unsplash.com/photos/?client_id=1234567890abcdefghijklmnopqrstuvwxyz&query=nature&per_page=10";

$scope.tags = 'flowers';

$http.get(apiURL, {
  params: { query: $scope.tags }
})
.then(function(response) {
  console.log(response.data);
}, function() {
  console.log('Error fetching data from API')
});

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

getting value of object property using a function that is located within the same object

I am attempting to access the 'context' property (or specifically 'context.settings') from within the 'ready' function in the same object. I am uncertain of the correct syntax to achieve this. Below is the code snippet: modu ...

javascriptoopnode.jsexpress

Is Angular JS binding case-sensitive?

Currently, I have a dropdown menu displaying a list of countries from a JSON file. Beside it, there is a text field that correlates to the dropdown, showing the ISO 3166 alpha-2 data (e.g. CH for Switzerland). Users have the option to input the 2-characte ...

javascriptangularjs

When attempting to push `content[i]` into an array in AngularJS, it is flagged

In my JSON data, I have the following structure: var data = [{ id: 1, name: 'mobile', parentid: 0, limit:3 }, { id: 2, name: 'samsung', parentid: 1 }, { id: 3, name: 'moto', parenti ...

javascriptangularjsjson

Uploading files in javascript and PHP

I am currently utilizing an audio recorder provided by this source , However, instead of storing the file locally, I am interested in uploading it back to the server. My attempt involved adjusting the Recorder.setupDownload function within the recording. ...

javascriptphpjqueryuploadjquery-file-upload

When altering a single scope variable in AngularJS, the effect cascades to impact other scope variables as well

After uploading my code on fiddle, I noticed that changes made to the myAppObjects variable also affect another variable. Here is the link to the code: https://jsfiddle.net/owze1rcj/ Here is the HTML part of the code: <div ng-controller="MyCtrl"&g ...

javascriptangularjs

The Mongodb database is failing to recognize updates made to the Mongoose schema

I have already created my database with the following schema: const ProjectSchema = new mongoose.Schema({ name: { type: String }, description: { type: String }, client: { type: mongoose.Schema.Types.ObjectId, ref: 'client& ...

javascriptnode.jsmongodbmongooseschema

Custom sample rate options in RecordRTC allow for the recording of silent audio tracks

I am currently working on implementing RecordRTC.js to capture audio from a microphone and then upload it to a server built with nancyfx. Initially, I am simply aiming to upload the audio stream and store it in a wav file for testing purposes. However, my ...

javascriptangularjswebrtcgetusermedia

Unit Testing Angular controllers with an external variable in Jasmine framework

Looking for ways to create a unit test for a controller that utilizes a $scope.action variable that is defined outside the controller. controller( "MyController", [ "$scope", "$window", "httpInterceptor", function($scope, Service1, Service2, $wind ...

angularjsunit-testingcontrollerjasmine

Can we split the PHP Photo Gallery into a second page after displaying 12 images?

I recently developed a simple PHP photo gallery for my website that pulls data from a MySQL database. By using a while loop, I am able to display three images (from ID 1 to 3) in a single row, continuing this pattern until a total of 12 images are shown. ...

phpjavascript

jQuery's Offset().left is experiencing some issues and not functioning correctly

Do you have a question about the jQuery offset() function? On my website, I utilize it to show an "email a friend" window when the email icon is clicked. However, the problem is that the window ends up stuck to the right side of the browser's window ...

javascriptjqueryoffset

Tips for preventing a child div from moving when scrolling towards it and creating an internal scroll with a smooth animation using either JavaScript or jQuery

Looking to add scrolling functionality with animation to a child div on my webpage? Check out this example. I attempted using JavaScript's on scroll function, but it didn't work as expected. Currently, I have it set up to trigger on click of cer ...

javascripthtmljquerycsscss-animations

In Angular 2, transferring data from a parent route to a child route

I have set up a route named "home" with three child routes: documents, mail, and trash. Within the home route component, there is a variable called 'user'. While I am familiar with various methods of passing information between parent and child c ...

javascriptangularjsangularcomponentsngroute

There is currently no feature to integrate postal code objects within React's Stripe elements

I'm currently working on designing a custom form for Stripe. Instead of using the entire card element, I am opting to bring in individual components from Stripe elements for better styling options. My goal is to layout these individual inputs in a gri ...

javascriptreactjsstripe-payments

What is the most effective method for implementing a fallback image in NextJS?

Lately, I've been immersed in a NextJS project that involves utilizing the YoutubeAPI to retrieve video details, such as thumbnail URLs. When it comes to fetching a full resolution image, the thumbnail URL typically follows this format: https://i.yti ...

javascriptreactjsnext.jsyoutube-apinextjs-image

Adjust the position of the IMG to the left side

Struggling with some code and need some assistance: <script> function run() { document.getElementById("srt").value = document.getElementById("Ultra").value; } </script> <script> function ru ...

javascripthtmlselectalignment

How do popular social media platforms such as Facebook and Twitter utilize real-time APIs to display live updates in news feeds

I'm curious about the technology being used for real-time updates, and I doubt they rely on AJax methods like setInterval() to make server requests every second. This approach could be inefficient with a large number of concurrent users. Do you think ...

javascriptjqueryajaxfacebooktwitter

The current CLI version is exclusively designed for Angular 5.0.0 or above and may not be compatible with other versions

I encountered an issue with my Angular project that was originally running on version 4. I mistakenly installed version 6 of Angular CLI while setting up a new project, resulting in an error message stating 'Your global Angular CLI version is greater ...

javascriptangularangular-cli-v6

Error in React Native: The function this.setState is not defined. (The function "this.setState" is not a valid function)

I am working on integrating JSON data from an open source API and storing it as a state. However, I am facing challenges in saving the JSON data into the state which I want to use for city matching. It would be really helpful if someone could provide assis ...

javascriptandroidnode.jsreactjsreact-native

Experiencing issues with $httpBackend in AngularJS testing using Jasmine - not producing expected results

This is my Controller: rcCtrls.controller('LoginController', [ '$scope', 'AuthService', function($scope, AuthService) { console.log('LoginController'); $scope.credentials = { email: '& ...

angularjsjasmine

Issue with PrimeNG Carousel width on mobile devices

Currently, I am in the process of developing a system interface with Angular and PrimeNG specifically for mobile devices. The main requirement is to have a carousel to display a set of cards. After evaluating different options, I decided to utilize the ngP ...

javascripthtmlcssangularprimeng