Attempting to iterate over elements within an object labeled as strIngredients 1-15

    event.preventDefault();

    $('#mainContent').empty();

    $.ajax({
        url: randomDrinksURL,
        method: 'GET'
    }).then(function (response) {
        console.log(response);
        var mainContent = $('#mainContent');
        mainContent.append(`
        <img src='${response.drinks[0].strDrinkThumb}'>
        <p>${response.drinks[0].strDrink}</p>
        <p>${response.drinks[0].strMeasure1} of ${response.drinks[0].strIngredient1}</p>
        <p> ${response.drinks[0].strInstructions}</p>
        `);
    });

This data provides details for various ingredients and measurements from 1 to 15. I am currently exploring ways to iterate through them dynamically, ensuring it stops when a value is null.

I attempted to use a for loop but encountered difficulties. Any suggestions or guidance on this matter would be greatly appreciated!

javascriptajaxobject

Answer №1

Is there a possibility for something like this to work in this scenario?

let html = `
        <img src='${response.drinks[0].strDrinkThumb}'>
        <p>${response.drinks[0].strDrink}</p>
        `

for (var i = 1; i<= 15; i++) {
  let ingredient= "strIngredient" + i;
  let measure= "strMeasure" + i;
  if (response.drinks[0][measure] && response.drinks[0][ingredient]) {
    html += `<p>${response.drinks[0][measure]} of ${response.drinks[0][ingredient]}</p>`
  }
}

html += `<p> ${response.drinks[0].strInstructions}</p>`

mainContent.append(html)

modified included a condition for null values

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

What is the process for passing a .js file into .ejs using Node.js?

I am facing an issue with loading the popmotion library into my main page, which is an .ejs file being passed to Node/Express. The code in my file popmotion.js is not running, and I want to control DOM elements mentioned in the ejs file through this file. ...

javascriptnode.jsexpressejspopmotion

Attempting to highlight a specific list item by using the CSS current class to emphasize its active state

I've been experimenting with different solutions I found in previous questions, but unfortunately, none of them have worked for me. I suspect the issue lies in the fact that the element is deeply nested within CSS classes, and my lack of experience is ...

javascriptcsswordpress

Exploring the functionality of buttons within GridMVC

At the moment, I am utilizing GridMvc to exhibit a list on an Ajax view with this code snippet: columns.Add() .Titled("Host").Filterable(true).Encoded(false) .Sanitized(false) .RenderValueAs(LogonEvents => Html.ActionLink(LogonEvents.Host, "Co ...

ajaxasp.net-mvcactionlink

Populate your HTML with JSON data

I need some guidance on how to achieve a specific task. I have a PHP file that retrieves data from a MySQL database and returns it in JSON format. Now, I want to display this data in HTML with "data_from_json" replaced by "18.5". Any assistance would be gr ...

javascripthtmljson

Angular is throwing an error stating that the type '{ }[]' cannot be assigned to the type '[{ }]'

I'm in need of assistance and clarification regarding the error I encountered in my application... When I receive a JSON response from an API with some data that includes an array of products, I aim to extract these products (izdelki) from the array, ...

javascriptarraysangulartypescriptionic-framework

The ng-show directive seems to be malfunctioning when used with UnderscoreJS's _.isNull function, but it functions properly when comparing

When using an ng-show directive on an element, I noticed that the UnderscoreJS helper function _.isNull behaves differently than the standard === operator. For example, when checking if newJobWorkPercentage is null: <div class="form-group" ng-show="ne ...

javascriptangularjsunderscore.js

Encountering an illegal invocation error in jQuery

Recently delving into the world of jQuery, I am attempting to call a C# function from JavaScript using AJAX and jQuery. Additionally, I need to pass some parameters while making the call to the C# function. Here is how I am attempting to achieve this: var ...

c#javascriptjqueryajax

How to effectively combine css() and delay() in jQuery?

fid: https://jsfiddle.net/k13sazuz/ Is there a way to create a delay chain for CSS rules using jQuery? $('.two').css('background','blue').delay(11800).css('background','red'); ...

javascriptjqueryhtmlcss

Unable to host Express app on Firebase functions emulator due to a port conflict with error code EADDRINUSE: address already in use :::3000

Testing the deployment of an express app on Firebase using Firebase functions has presented a challenge for me. Upon running the command firebase serve, I encountered the error EADDRINUSE: address already in use :::3000. Below is my index.js file: const fu ...

javascriptnode.jsfirebaseexpressgoogle-cloud-functions

Guide to crafting your own Chrome browser extension

I have a question that is giving me some trouble. I am working on developing a Chrome extension that will track and update the number of times a specific website has been visited or clicked in a database. I want this count to be displayed before the site i ...

javascriptajaxgoogle-chrome-extension

Omit node_modules from typescript compilation using gulp-typescript

Having trouble running a gulp task to compile my typescript due to dependency-related errors. /content/node_modules/@angular/core/src/facade/lang.d.ts(12,17): error TS2304: Cannot find name 'Map'. /content/node_modules/@angular/core/src/facade/l ...

javascriptgulpgulp-typescript

Retrieve information using an AJAX call

There is JSON data stored in a file that I need to read. The correct file data is printed to the console.log. What steps should I take to assign this data to variable x? Currently, when I execute the code, x ends up being undefined. function getData() { ...

javascriptjqueryajaxfile

Executing a closure within a promise's callback

Currently, I am working on implementing a queue system for a web application in order to locally store failed HTTP requests for later re-execution. After reading Mozilla's documentation on closures in loops, I decided to create inner closures. When ...

javascriptangularjs

Enhance or Delete Dynamic linked select boxes in Laravel

Here is a straightforward dynamic form where you can choose a country from the first select box and it will display all the states of that country in each row. Initially, it worked fine for the first row but when I clicked on "Add More" and selected anothe ...

javascriptphpjqueryajaxlaravel

Slider malfunctioning following AJAX loading

After the user clicks on #mail-wrap, I am attempting to trigger the ready event which loads another page with AJAX so that sss() can be refired. Despite my efforts, it seems like it is not working as expected. Can you help me identify what might be going w ...

javascriptjqueryajax

Display various JavaScript function outputs in an HTML table for convenient tracking

Thanks to a helpful user on this platform, I was able to capture data from a JavaScript function and display it in an html table. However, I now have another query. How can I execute the function multiple times during page load and record the results in ...

javascripthtmlfunctionhtml-tablegetelementbyid

What could be causing my button to not capture the value of this input text field?

After clicking the button, I am trying to log the value of the input text field in the console. However, it just shows up as blank. Despite checking my code multiple times, I can't seem to figure out why. Any insights would be greatly appreciated! &l ...

javascriptjquery

Angular routing template failing to execute inline JavaScript code

I'm facing an issue with my Angular.js routing implementation. I have successfully displayed the HTML code in templates using angular.js, but now I am encountering a problem with my template structure: <div id="map_canvas" style="width:95%; heigh ...

javascripthtmlangularjs

passport.js and express.js working together to seamlessly redirect users back to the original page after completing oauth authentication

How can I navigate users to the same page after an OAuth request to Twitter by setting a session variable? Here is how the routes are currently configured: // Authentication routes (function () { app.get('/auth/twitter', passport.authentica ...

javascripttwitterexpressoauthpassport.js

React: Component styles fail to update dynamically

I have been working on creating a component that can adjust its size dynamically based on props. Currently, I am experimenting with the code below, but I've noticed that when I change the slider, the component's size doesn't actually change. ...

javascriptreactjs