update the array to have just one key

Struggling with extracting only the localized names from a JSON/Array related to a popular video game. Despite being close, I can't seem to create a new array correctly. Can anyone spot what's missing in my code?

const endpoint = './heroes-org.json'
let heroes = []
let renamed = []

fetch(endpoint)
  .then(text => text.json())
  .then(data => heroes.push(...data.result.heroes))
  .then(() => {
    for(i = 0; i < heroes.length; i++){
        // renamed += heroes[i].localized_name
        //heroes.map(function){
        //}
        setTimeout(function(){
            console.log(renamed)
        }, 2000)
    }})

Experimenting with the map function as a way to eliminate unnecessary keys within each element of the array.

When I try to console log heroes directly in the Chrome console, the output appears disjointed:

https://i.sstatic.net/tE023.png

This fragmented indexing seems odd. What might be causing my array to split into segments?

The end goal is to consolidate all 115 hero names into a single array.

Answer №1

One interesting quirk of Chrome is its behavior when dealing with large arrays. Chrome automatically breaks up arrays into smaller parts, each consisting of 100 elements, to make debugging easier. You can see this in action by looking at the length property of the array, which is showing a value of 115!

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

Utilize React to showcase all stored items in localStorage in a Material UI List

I have a storage system with multiple items stored in it. I am looking to retrieve all of them and showcase them using a <ListItem> from Material UI. This is my current code snippet: function saveItem(key, value) { localStorage.setItem(key, value) ...

There was an error in the syntax: an expression was expected, but instead the character '}' was found in mongoDB

Encountering the error message SyntaxError: expected expression, got '}' @(shell):1:0 when executing a query in the shell. db.address.aggregate([ { "$project": { "applications": { "$filter": { ...

Assign the "this" keyword of App.vue to the Vuex state

I have discovered a workaround for accessing vue-router and other services that only works within a Vue component. By saving the "this" of the Vue app in the state of Vuex within the created option of App.vue. Is this a good approach or could it potential ...

Is it possible to make changes to a box within a current PDF document using HummuJS?

I'm looking to update some existing PDF files with new data. According to the HummusJS documentation, I should be able to modify the box using parsing and modification techniques. However, I haven't been able to find the correct method to do so. ...

Create an HTML table with a line separating two table cells

I need help with creating a table row and td's dynamically using basic HTML and CSS. I would like to draw lines between the td's similar to the example image shown below. Can someone please assist me in achieving this? https://i.sstatic.net/GPd ...

Validating form inputs with jQuery in a Flask application

Utilizing wtforms in my Flask application, I am interested in validating forms in the browser using jQuery. Here is a snippet of my form code: class LoginForm(Form): email = StringField('Email',[validators.DataRequired(message='Sorry, t ...

Creating motion in a loading bar as a result of every Ajax request

In summary, I have a JavaScript array containing CSV files that need to be loaded into a MySQL database. I've created a script that uses Ajax calls to upload the files to a PHP page for database insertion. On the client side, there is a progress bar t ...

Assigning a value to an attribute as either a "string" or null within JSON Schema while specifying a maximum length

I'm currently working on crafting a JSON schema that supports a nullable attribute. I am aiming to have the ability for specific JSON structures like this one be considered valid: { "some_name" : null } This is how my schema looks like: { "type" ...

How come the behavior of Array.prototype.push() results in creating an endlessly nested array when used on itself?

While testing out the following code: const animals = ['pigs', 'goats', 'sheep']; animals.push(animals) console.log(animals); An error occurred in my testing environment: Issue: Maximum call stack size exceeded. What is c ...

Having trouble halting the execution at specific checkpoints within an asp.net core project containing an angular 8.0 application located in a subfolder named ClientApp

Encountering difficulties stopping at breakpoints in an asp.net core project with an angular 8.0 app located in a subfolder within ClientApp. The app I need to set a breakpoint in is located at clientapp\apps\microsympan\app\src\ap ...

Sending the image's identification number as a parameter to a function and showing the total number

On a static page, I have the following HTML markup: <div class="middle-content"> <div class="white-div"> <div class="like-buttons"> <img id="1" src="up.png" onclick="onClick(true, this.id)" /> &l ...

Using Node.js to instantly redirect users to a new page while also sending them important

I am currently working on building a basic server for HTML pages using Node.js. The issue I am facing is that when I go to (for instance) http://localhost:8080/someDirectory, the browser mistakenly treats someDirectory as a file (when in reality, it is int ...

Resolving a Routing Problem with moment.js

Hi everyone, I'm new to working with express.js and backend routing. I'm encountering an error with my server code and would appreciate any insights on what might be causing it. I've already tried using res.end() with plain text, but the err ...

Is it possible to automatically clear a function from memory after it is executed in an iOS Swift app to

I'm new to asking questions, but I've encountered an issue with my iPad Kiosk mode app that is installed in schools. The app faces intermittent internet problems, so I added a piece of code to check if the server is reachable. I tried using Reach ...

How can I transfer a value to a database table for processing?

I am new to the world of AJAX and currently working on a JSP page that has an intriguing setup: https://i.sstatic.net/rkIHG.png The feature I'm focusing on is the new username column, where I can enter any text string and upon clicking the 'upd ...

Is there a way to connect to a function that has been sent to a child component through a prop in order to invoke it within a function in the child component?

I'm currently facing an issue with accessing the function stored in the closeModal prop that is passed to the child component QRScan. Any advice on how to properly bind and call this function would be greatly appreciated. I attempted to use this.prop ...

"Utilizing Google Charts DataTable to easily adjust column number based on data dynamics

Struggling with managing JavaScript objects... Currently, I am working on generating a Google Chart based on user selections. The process involves two multi-select lists that construct an object as shown below: $('option:selected', $('#slC ...

Tips for setting a value from an AJAX-created element into a concealed form field

There is a div that contains a button. When the button is clicked, a form appears. The div's id is then assigned to a hidden field within the form. This functionality works for the divs that are present on the page when it initially loads, but it does ...

Developing an Android application that processes and interprets JSON data retrieved from a PHP MySQL database with

While working on my android app, I encountered an issue with retrieving data from the database where special characters were being sent incorrectly. The process involves sending data from the app, storing it, and then retrieving it. Strangely, the data is ...

Launch the desired div in a fancybox from a separate webpage

i have a table with links to another html doc like this <div id="gallery_box"> <ul> <li> <a href="http://www.geestkracht.com" target="_blank"><img src="images/gallery/Geestkracht.jpg" alt="G ...