An error was caught: the object is not iterable and cannot read the property Symbol(Symbol.iterator) within the XMLHttpRequest function

const container = document.querySelector("#box");

request.open("GET","https://api.data.com/population/us"); 

request.send();

// To retrieve the response

request.addEventListener("load",function(){

    // console.log(this.responseText);

     const [data] = JSON.parse(this.responseText);
     console.log(data);

    // const htmlData = "<div></div>";
    // container.insertAdjacentHTML("afterbegin",htmlData)
})

I'm encountering an issue with JSON.parse(this.responseText) specifically at this line, can someone assist me in resolving it?

javascriptjsonapi

Answer №1

No need for square brackets [] or curly braces {} around the information. Simply having the information is sufficient in this scenario.

let information = JSON.parse(this.responseText);

Answer №2

Upon calling the function, the following result is returned:

{"data":[{"ID Nation":"01000US","Nation":"United States","ID Year":2019,"Year":"2019","Population":328239523,"Slug Nation":"united-states"},{"ID Nation":"01000US","Nation":"United States","ID Year":2018,"Year":"2018","Population":327167439,"Slug Nation":"united-states"},{"ID Nation":"01000US","Nation":"United States","ID Year":2017,"Year":"2017","Population":325719178,"Slug Nation":"united-states"},{"ID Nation":"01000US","Nation":"United States","ID Year":2016,"Year":"2016","Population":323127515,"Slug Nation":"united-states"},{"ID Nation":"01000US","Nation":"United States","ID Year":2015,"Year":"2015","Population":321418821,"Slug Nation":"united-states"},{"ID Nation":"01000US","Nation":"United States","ID Year":2014,"Year":"2014","Population":318857056,"Slug Nation":"united-states"},{"ID Nation":"01000US","Nation":"United States","ID Year":2013,"Year":"2013","Population":316128839,"Slug Nation":"united-states"}],"source":[{"measures":["Population"],"annotations":{"source_name":"Census Bureau","source_description":"The American Community Survey (ACS) is conducted by the US Census and sent to a portion of the population every year.","dataset_name":"ACS 1-year Estimate","dataset_link":"http://www.census.gov/programs-surveys/acs/","table_id":"B01003","topic":"Diversity","subtopic":"Demographics"},"name":"acs_yg_total_population_1","substitutions":[]}]}

It is important to note that the returned object contains the desired data key, which can be accessed using curly brackets instead of normal brackets.

To extract the data key from the object, use the following syntax:

const {data} = JSON.parse(this.responseText);

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

Find the flowplayer when the page loads

Is there a way to make a flowplayer seek at the page load without it resetting? I've tried this: $(document).ready(function() { $f(0).seek(5); }); also tried: $(document).ready(function() { while(!$f(0).isLoaded()) { $f(0).seek(5); } }); ...

javascriptjqueryflowplayer

Struggling to retrieve the values of dynamically generated input fields using a combination of ajax and php

I'm attempting to utilize an Ajax function to post values obtained from a form. Initially, I'm using another Ajax function to populate the form's text box. Then, in order to submit the form data, I'm trying to implement another Ajax fun ...

javascriptphpjqueryajax

Is there a way for a button to automatically delete its corresponding index in an array upon being clicked?

I am currently developing a multiple choice quiz where users can input their own questions and answers to create a quiz. I am facing an issue with allowing users to delete questions stored in the question bank. Here is what I have tried so far: bodyText ...

javascriptarrays

Updating a nested key in a JSON field with Postgres in a Rails application

I've been attempting to modify the following data: {"boxes": {"book": 2, "moving": 2}, "goods": {}} so that it becomes: {"boxes": {"book_new": 2, "moving": 2}, "goods": {}} without relying on a regular expression or using Ruby. However, this task ...

jsonpostgresqljsonb

Exploring the React component life cycle: Understanding the distinction between render and return, and what happens post-return

This question pertains to the concepts surrounding react component life cycles. Below is an example code snippet provided as a general reference. const Modal = ({ className, variant, width, withCloseIcon, isOpen: propsIsOpen, onClose: tellParen ...

javascriptreactjsreact-hooksreact-functional-component

What could be causing the malfunction of DirectionalLight in three.js?

While working on a project in three.js to create a ring, I encountered an issue with lighting. The camera setup is fine, but I'm facing difficulties with lighting. Below is my code snippet: <script src="three.js"></script> <sc ...

javascriptthree.jslight

Page displaying issue with React API elements

I've spent the last couple of hours trying to figure out why none of the information is being displayed on the page. I've checked the console log for my response from a basic random quote API, and it does show "Author:" and "Quote:" in the consol ...

reactjsapi

What could be causing the error message `this.props.data is undefined` to appear for me?

I followed a tutorial and encountered an error while executing it: CLICK The error message I received was: this.props.data is undefined. I was implementing the tutorial in my test application, alongside testing various React tools. I didn't copy-pas ...

jsonreactjsentity-frameworkwebpackasp.net-core-mvc

I attempted to upload an image using the Google Drive API, but encountered an error in the response

I am attempting to upload an image using the Google Drive API, but I encountered an error in the response message. The error reads as follows: "Failed to load resource: the server responded with a status of 403 ()" ...

javascriptgoogle-drive-api

The data remains stagnant and unchanging, consistently showing the same result even after the project has been deployed

In my Next.js v13.2 application, I developed an API endpoint that retrieves data from a database. app/api/someData Everything was functioning perfectly until I deployed it on Vercel. It seems like the issue lies in the caching of the route, leading to the ...

javascriptreactjscachingnext.jsvercel

vertical lines alongside the y-axis in a d3 bar graph

https://jsfiddle.net/betasquirrel/pnyn7vzj/1/ showcases the method for adding horizontal lines along the y axis in this plunkr. I attempted to implement the following CSS code: .axis path, .axis line { fill: none; stroke: #000; } I am lo ...

javascriptcssd3.js

Verify if an element with a specific index exists within an array

$.each(constructions, function(i,v) { if ($.inArray(v.name, map[ii].buildings) == -1) {//do something} }; In this scenario, the constructions array consists of unique objects with a name attribute. On the other hand, map[ii].buildings is an array contain ...

javascriptjqueryarraysobjecteach

Attempting to categorize JSON object elements into separate arrays dynamically depending on their values

Here's the JSON data I'm currently working with: ?$where=camis%20=%2230112340%22 I plan to dynamically generate queries using different datasets, so the information will vary. My main objective is to categorize elements within this array into ...

javascriptarraysjsonsortingtypescript

Is Cookie-session the most ideal choice for React applications?

My NodeJS application currently authenticates users through a third-party app. Once the app retrieves user data, a cookie is generated and sent to the client for React to access the user data from that Cookie. Should I stick with using cookies or consi ...

javascriptnode.jssecurityexpresssession-cookies

Updating an array of objects in React by setting a new value for a key

I am facing an issue with an array object called venue.products. It may or may not be pre-filled, depending on whether it has been saved previously. When the venue.products array is pre-filled, the code works fine and I can update it. However, if it is not ...

reactjsarraysjsonobjectreact-hooks

Insert several elements into each array that are the same

$ node > A = [0, 1, 23] [ 0, 1, 23 ] > B = A [ 0, 1, 23 ] > A.splice(0, 3) [ 0, 1, 23 ] > B [] > A [] > A = A.concat([1, 2]) [ 1, 2 ] > B [] Indeed, the code execution sequence yields the expected results. However, do you think there ...

javascriptarraysnode.js

Disabling the loading of JavaScript on a Magento website

Seeking advice - I'm experiencing a delay on my website due to 3 unnecessary javascripts that are being loaded. Is there a way to prevent these scripts from loading or being searched for? Listed below is the website log where I am unable to locate jq ...

javascriptmagento

Convert JavaScript to TypeScript by combining prototype-based objects with class-based objects

My current challenge involves integrating JavaScript prototype with class-based programming. Here is an example of what I've tried: function Cat(name) { this.name = name; } Cat.prototype.purr = function(){ console.log(`${this.name} purr`) ...

javascripttypescriptclassprototype

Display the accurate prompt in the event of 2 `catch` statements

elementX.isPresent() .then(() => { elementX.all(by.cssContainingText('option', text)).click() .catch(error => { throw {message: "Unable to select text in dropdown box"} ...

javascript

Is there a way to print the full page including scroll tab content?

https://i.sstatic.net/FJt7P.png I am facing an issue where I want to print the entire page including the scrollable content within a tab. Currently, only the visible screen content is being printed. ...

javascriptreactjs