I am having trouble retrieving the information stored in an Array of Objects. Specifically, I am having difficulty accessing and iterating through each object using a for

Is there a way to extract data from an API individually and retrieve data from an Array?

let {Array}=jsonData
fetch("https://apis.ccbp.in/city-bikes?bike_name" + search, options)
.then(function(response){ 
 return response.json();
})
.then(function(jsonData){
let {Array}=jsonData

console.log(Array)
console.log(jsonData)
})

result - undefined

result-

Array [Object {}]
0: Object {city: "Moscow", id: "velobike-mosco.

Answer №1

Is it as simple as looping over it with a for loop?

fetch("https://apis.ccbp.in/city-bikes?bike_name")
.then(function(response){ 
 return response.json();
})
.then(res => {
  for (const entry of res) {
    let {city, id, name} = entry;
    
    console.log(city, id, name);
    // feel free to perform any desired actions
  }
})

Answer №2

When retrieving data based on the query parameter "bike_name", it is recommended to use template literal strings in order to include a variable within the string. Additionally, it is advised to utilize arrow functions instead of traditional functions within the then() promise chain for better efficiency. The following code snippet demonstrates how you can achieve this:

fetch(`https://apis.ccbp.in/city-bikes?bike_name=${value}`,{method:'GET',headers:{}})
.then((response)=>{ 
 return response.json();
})
.then((jsonData){
console.log(jsonData)'
})

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

Encountering vulnerabilities during the deployment of my React App using NPM has presented a challenge

Just starting out with React Js and seeking some guidance. I've developed a small React app that filters team members based on text input, and it's running smoothly in the development environment when I start NPM. Please review my project and poi ...

What is the reasoning behind jQuery UI employing CSS classes as opposed to pseudo-classes?

In this detailed explanation found on this website, it is discussed why jQuery UI uses CSS classes like .ui-state-active that are applied through JavaScript, rather than utilizing existing CSS pseudo-classes like :active. What is the reasoning behind thi ...

Customize a theme component only when it is a child of another component

I am trying to customize the CSS of MuiButton only when it is nested inside a MuiDialog. https://i.stack.imgur.com/13doLm.png In regular CSS, you could achieve this with: .MuiDialog-root .MuiButton-root { border: 5px solid blue; } However, I am strug ...

Issue with Wordpress Submenu Items not Displaying

I've included sub menu items in my primary navigation, but they're not visible at all? I've examined the css and haven't found any code that would hide the sub menu. ul.art-hmenu { display: inline-block; vertical-align: midd ...

What could be causing the issue preventing me from applying a border in the code below?

There seems to be an issue in the code below where I am struggling to apply a border Can anyone help identify what the problem might be? <!doctype html> <html> <head> <title> My first Navigation Page</title& ...

Deep-diff JavaScript functions are not permissible for use

In my AngularJS application, I am currently attempting to utilize a JavaScript package. To reference it in my index.html file, I added the following code: <script src="deep-diff-0.3.1.min.js"></script> Furthermore, in my controller, I am usin ...

Is there a way to extract a username from LDAP?

Can you help me understand how to dynamically retrieve a username from LDAP? In the code snippet below, I have hardcoded the username as 'smith2': $_SERVER["REMOTE_USER"] = 'smith2'; $param = $_SERVER["REMOTE_USER"] By using this appr ...

Transmitting data from the backend to AngularJS during page load

After diving into Angular JS for the first time, I've hit a roadblock at an essential stage. My setup consists of an AngularJS front end and Grails backend. Check out the code snippets below along with my query. URL Mapping entry: as "/graph"(cont ...

The display: flex property is not being properly implemented in Tailwind CSS for the sm:flex

I have a div with the following styles <div class="hidden sm:visible sm:flex"> .... </div> The sm:visible style is applied like this @media (min-width: 640px) .sm\:visible { visibility: visible; } However, the property disp ...

Inner box shadow obscured by a sibling div

I am facing an issue with a div that has an inner box shadow being covered by another div. I have tried using position: relative, but it did not solve the problem. Here is an example: CODE EXAMPLE .example-div{ background:#fff; color:#000; ma ...

Updating React JSX class based on certain conditions without manipulating the actual DOM

When working with jsx react, I am looking to dynamically set a class while keeping another class static. Here is an example of what I would like to achieve: maintaining the type class and having an additional dynamic class change change to either big, smal ...

Animate the centering of a DIV

Currently, I am working on an animation featuring a series of DIV's contained within a div with the identifier id="wrapper", all styled using CSS3. However, when I hover over the rounded box, the animation is not properly aligned in the center. You ca ...

Utilize the three.js library within a Vue component by importing it and incorporating its

Can someone please help me understand the proper way to import and utilize the three.js library in a vue component? Despite my extensive research, it seems that most individuals use the following code line to import three.js into a vue component. However, ...

Utilize styled-components in next.js to import and resize .svg files seamlessly

I have been attempting to import .svg files into my next.js project, but I have not had any success. I tried importing the .svg files the same way as in my React project by creating a typing.d.ts file and importing the svg as a component. However, it did ...

Modifying the appearance of the login field shown in the image

How can I align the login and password fields in the same order on my webpage? When I attempt to adjust their positions using CSS margin commands, both fields end up moving. Any suggestions? ...

Tips on incorporating a style-tag into the body of an Angular 5 application

We offer a service that collects a vast amount of data to be displayed in an angular 5 application. The model used for displaying this data is constantly evolving and shared across multiple applications, so I need to import it dynamically. My approach inv ...

What is the proper way to showcase thumbnails in different sizes?

Currently, this is what I have: https://i.sstatic.net/VOC2z.png The display looks optimal with high-resolution landscape photos. This is the HTML and CSS code in use: <div class="upload-thumb ng-scope visible"> <span class="delete-media"&g ...

What steps should I follow to update this React Navigation v5 code to v6?

As I delve into my studies on React Native, I came across the deprecation of the tabBarOptions feature. I understand that now we need to include it in screenOptions, but I'm facing issues with implementing this in my code. I tried enclosing them in br ...

How odd! Using window.location or location.replace redirects to the page and then reverses back!

While in debug mode, I am able to track which page is being accessed. Interestingly, whenever I use window.location or window.location.replace(..), the browser redirects to the specified page but then quickly returns to the original one! This strange beh ...

What is the best method for sending variables to the `script.` block in Pug?

I am encountering an issue with the code in my index.pug file doctype html html head title= title body script(src=`${source}`) script. for (var event of events){ VClient.Event.subscribe(event, createDiv); } This is how ...