Angular-17 Failed to load resource the server responded with a status of 404 Not Found

I built an e-commerce site, but when I upload an image, it doesn’t update. The image path is stored in the database and fetched through the API.

For example,From API got BuyerImage :
“D:/shihab/Office/e-commerce/ecommerce/src/assets/BuyeruserA_638785018821957139.png”

However, if I set it like this:
src=”assets/Buyer/userA_638785018821957139.png”
I don’t get the updated image when I try to update it.

Everything works smoothly when I run ng serve, and there are no issues. However, I’m facing a problem elsewhere. I’ve tried to describe the issue as clearly as possible. If anything is unclear or you need more details, please feel free to ask for further clarification. I’d really appreciate your help in solving this!

After Upload Image I got this problem

after the update, with new Image path API response

The image source paths are correct. But Image is not showing

let vs. var – Which shall I use and why? [duplicate]

I’m seeking clarification on the differences between var and let. While I understand the basic distinctions, such as var being function-scoped and let being block-scoped, I’m still unsure about their practical implications, especially in larger or more complex applications.

Specifically, I have a few questions:

  • How do the scoping differences between var and let affect their
    behavior in real-world code (e.g., within loops, conditionals, or
    functions)?
  • Are there any specific cases where using var might still be
    advantageous, or should I stick to let for consistency and modern
    best practices?
  • For large-scale projects, are there any significant pitfalls,
    performance issues, or readability concerns when using var versus
    let?

I would appreciate any insights, examples, or advice on when it might be better to use one over the other.

What is the difference between “let” and “var”? by @TM..

Just asking for advice

I’m new to JavaScript and I’m looking for some guidance from the experienced members of the community. I’ve noticed that there are two common ways to declare variables: using var and let. While I’ve read that there are differences between the two, I’m still a bit confused about how they behave in different contexts, especially in larger scripts or more complex applications.

Specifically, I have a few questions:

  • I understand that var is function-scoped while let is block-scoped. How does this affect their usage in practical scenarios?

  • Are there particular cases where using var is advantageous, or is it generally recommended to stick with let for consistency?

  • In large-scale projects, what are the potential pitfalls of using one over the other? Is there a significant performance or readability benefit to choosing let exclusively? (Which I’m currenty doing.)

I’d love to hear from those with more experience about when, if ever, it might be necessary or beneficial to use var instead. Any insights, examples, or personal experiences you could share would be appreciated.

What is the best way to take a full-page screenshot using a browser extension?

I’m building a browser extension (using HTML/CSS/JavaScript, with a framework like WXT) and I want to implement a feature that captures a full-page screenshot, not just the visible viewport.

I’ve already explored approaches like:

  1. Using chrome.tabs.captureVisibleTab() — but this only grabs the current visible area.
  2. Manually scrolling the page and stitching screenshots using chrome.tabs.captureVisibleTab()— but this feels janky and complex.
  3. Injecting a content script and attempting to render the page to an Offscreen canvas then attempting to take a full page screenshot – This works but creates CORS issue..

Questions:

  1. What are the best practices or APIs for taking full-page screenshots inside a browser extension?
  2. Are there any well-supported libraries or Chrome APIs that simplify this?
  3. Any performance or compatibility issues I should be aware of?
  4. Would it be a good approach to implement a backend server with puppeteer or playwright and then take the screenshot of the url using the headless browser?

Responsive Image Flow Horizontal Gallery

I’m working on attempting to replicate this gallery: https://preview.themeforest.net/item/core-minimalist-photography-portfolio/full_screen_preview/240185

I have some code that works for me on my desktop, giving a similar effect only displaying 3 images at a time, but it is not responsive. I’d like for it to adjust as the example, cropping down to only displaying the middle image when the viewport is small enough. I thought the percentages would work but it doesn’t adjust to the view port at all and maintains its size regardless of the window size.
I’d like it to be compatible with Bootstrap, but I’m not sure if Bootstrap is interfering with any of my attempts to make this responsive or not.

This is my HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1">
    <title>Horizontal Scroll Gallery</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    

<nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Thirteenth navbar example">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11" aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse d-lg-flex" id="navbarsExample11">
          <a class="navbar-brand col-lg-3 me-0" href="#">Brand</a>
          <ul class="navbar-nav col-lg-6 justify-content-lg-center">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" aria-disabled="true">Disabled</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
          </ul>
          <div class="d-lg-flex col-lg-3 justify-content-lg-end">
            <button class="btn btn-primary">CTA</button>
          </div>
        </div>
      </div>
    </nav>
</head>
<body>
<div class="container-fluid ps-3 pe-3">
  <div class="gallery-container">
       <div class="gallery">
            <div class ="units">
                <div>
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/paris-cafe-terrace.jpg" alt="">
                </div>
                <div >
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/paris-cafe-terrace.jpg" alt="">
                </div>
            </div>
            <div class ="units">
                <div>
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/paris-seine-boat.jpg" alt="">
                </div>
                <div >
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/paris-seine-boat.jpg" alt="">
                </div>
            </div>
            <div class ="units">
                <div>
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/shop-window-reflection.jpg" alt="">
                </div>
                <div >
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/shop-window-reflection.jpg" alt="">
                </div>
            </div>
            <div class ="units">
                <div>
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/notre-dame-river-boat.jpg" alt="">
                </div>
                <div >
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/notre-dame-river-boat.jpg" alt="">
                </div>
            </div>
            <div class ="units">
                <div>
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/paris-cafe-terrace.jpg" alt="">
                </div>
                <div >
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/paris-cafe-terrace.jpg" alt="">
                </div>
                </div>
            <div class ="units">
                <div>
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/shop-window-reflection.jpg" alt="">
                </div>
                <div >
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/shop-window-reflection.jpg" alt="">
                </div>
            </div>
            <div class ="units">
                <div>
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/notre-dame-river-boat.jpg" alt="">
                </div>
                <div >
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/notre-dame-river-boat.jpg" alt="">
                </div>
            </div>
            <div class ="units">
                <div>
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/paris-cafe-terrace.jpg" alt="">
                </div>
                <div >
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/paris-cafe-terrace.jpg" alt="">
                </div>
                </div>
            <div class ="units">
                <div>
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/shop-window-reflection.jpg" alt="">
                </div>
                <div >
                 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/shop-window-reflection.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

Here is my CSS:



 .gallery-container {

     overflow: hidden;
     position: relative;

     width:100%;
     
     
 }
 .gallery {
     display: flex;
     

    width:max-content;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);


     
 }
 .gallery img {
    
     height: 37rem;
    width:100%;
     object-fit: cover;
     transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-in-out;

     flex: 0 0 auto;
     opacity: 0.6;
    padding: 3rem;

 }

 .gallery img.active {
     transform: scale(1.2);
     opacity: 1;
    scroll-snap-align: center;
    flex: none;

 }
        
                
/*Reflected CSS */


/* reflection */
.units > :last-child {
    
  transform: rotatex(180deg) translatey(2.95rem);
  mask-image: linear-gradient(transparent 30%, white 90%);
  -webkit-mask-image: linear-gradient(transparent 30%, white 90%);
  text-shadow: 0 0 8px rgba(255 0 0 / 0.4), -2px -2px 6px rgba(0 255 0 / 0.4),
    2px 2px 4px rgba(0 255 255 / 0.4);
  background-image: unset;

}
/* original design */
.units > * {
  font: bolder 5rem/5rem "EB Garamond";
  background-image: url();
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.units {
  width: max-content;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  padding: 0;
  margin:0;
  display: inline-block;
}

My javscript:


const gallery = document.querySelector('.gallery');
const images = document.querySelectorAll('.gallery img');
let index = 0;
let imageCounter = 2;
let imageWidth;
const galleryContainer = document.querySelector('.gallery-container');

// Function to update the gallery when the window is resized or when the wheel is scrolled
function updateGallery() {
    // Ensure the width is calculated correctly based on the container's width
    imageWidth = galleryContainer.offsetWidth / 6; 
    
    // Apply a smooth translate effect to the gallery
    gallery.style.transform = `translateX(${-index * imageWidth}px)`;
    
    // Update active class on the images (based on scroll position)
    images.forEach(img => img.classList.remove('active'));
    images[imageCounter].classList.add('active');
}

// Event listener for wheel scroll
document.addEventListener('wheel', (event) => {
    if (event.deltaY > 0 && index < images.length - 6) { // Scroll down
        index += 2;
        imageCounter += 2;
    } else if (event.deltaY < 0 && index > 0) { // Scroll up
        index -= 2;
        imageCounter -= 2;
    }
    updateGallery();
});

How does Whasapp render message previews (link, blold, ..etc) if the API returning message as string plain text?

I’m a React JS Developer Who is working with business API. I’ve noticed that API returning message as string or plain text. but in preview they are parsing it ln link, bold, italic …etc format.

in conclusion i just wanted to know how they showing the preview. are they using custom parser or any kind of packages for it ?

here is the preview example:
preview example

How to detect fullscreenchange if it came from pressing f11

I’m creating a function for full screen via pressing f11 or from icon. What is the efficient way to detect if the fullscreenchange event came from pressing f11 below is my code going full screen by pressing icon. What I’m planning is hide BaseScene.fullScreenIcon if user press f11 for full screen

setFullScreenIcon(){

    const displayFullScreenIcon = () => {

      BaseScene.fullScreenIcon = this.add
        .image(0, 0, 'enterFullScreenIcon')
        .setOrigin(.5, 1)
        .setInteractive();

      const fullScreenIconScaleXAndY = BaseScene.windowWidth * .05 / BaseScene.fullScreenIcon.width;
      BaseScene.fullScreenIcon.setScale(fullScreenIconScaleXAndY, fullScreenIconScaleXAndY);

    };

    const toggleFullScreen = () => {
      this.scale.isFullscreen ? this.scale.stopFullscreen() : this.scale.startFullscreen();
    };

    const changeFullScreenIcon = () => {
      BaseScene.fullScreenIcon.setTexture(
        this.scale.isFullscreen ? "exitFullScreenIcon" : "enterFullScreenIcon"
      );
    }
    
    const setupFullScreenHandlers = () => {

      BaseScene.fullScreenIcon.on('pointerdown', toggleFullScreen);

      document.addEventListener("fullscreenchange", changeFullScreenIcon);   

    };
    
    displayFullScreenIcon();
    setupFullScreenHandlers();

  }

How can I write a discord.js slash command to query a MySQL database?

I’m quite new to discord.js and js in general. I haven’t been able to figure out how to let a user execute a command to query a MySQL database.

In my index.js file, I’ve been able to successfully connect js to my local MySQL database and it runs a quick test on the table ‘users’ on startup.

require('dotenv/config');
const {Client, IntentsBitField} = require('discord.js');
const {CommandHandler} = require('djs-commander');
const path = require('path');
const mysql = require('mysql');

const client = new Client({
    intents: [
        IntentsBitField.Flags.Guilds, //lets us get info on servers
        IntentsBitField.Flags.GuildMembers, //info on users
        IntentsBitField.Flags.GuildMessages,
        IntentsBitField.Flags.MessageContent,
    ],
});

//lets us write events/commands etc to the other folders to keep this file clean
new CommandHandler({
    client, 
    eventsPath: path.join(__dirname, 'events'),
    commandsPath: path.join(__dirname, 'commands'),
});

//mysql connection
var pool = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_DATABASE,
    port: process.env.DB_PORT
})

var connection = pool.getConnection((err, con) => {
    if (err) {
        console.log("Error DB connect: " + err);
        throw err;
    }
    else {
        connection = con;
        console.log("Connection established.");

        connection.query('SELECT points FROM users',(err, result) => {
            console.log(result);
            //interaction.reply({content: `Result:${result}`})
        });
    }

});

client.login(process.env.TOKEN);

I’ve also been able to create a separate names.js file that executes /names in Discord, albeit, it only produces text.

module.exports = {
    data: {
        name: 'names',
        description: 'gets all the names',
    },

    run: ({interaction}) => {
        //connection.query('SELECT username FROM users',(err, result) => {
        //    console.log(result);
        //    interaction.reply({content: `Result:${result}`})
        //});
        interaction.reply('collecting data');
    },
}

Does anyone know how I can incorporate a query into the result of a /command? In this example, the /names command would return a message with the usernames from the database.

fetch GET returns nothing(204) but works(200) in Chrome DevTools

I am trying to write a GET http call to a site to get game scores. I figured out the x-hsci-auth-token token and it uses Akamai Edge Authorization Token. I get good responses for all but 1 request.

For this one request, I get 204 and “No Content”. But the same request returns valid response in the Chrome’s DevTools. I am not sure what I am missing here.

{
  status: 204,
  statusText: 'No Content',
  headers: Headers {
    'x-hsci-cache-time': '2025-04-05T22:59:49.093Z',
    expires: 'Sat, 05 Apr 2025 22:59:49 GMT',
    'cache-control': 'max-age=0, no-cache, no-store',
    pragma: 'no-cache',
    date: 'Sat, 05 Apr 2025 22:59:49 GMT',
    connection: 'keep-alive',
    'access-control-allow-headers': 'Content-Type,Authorization,x-hsci-auth-token',
    'access-control-expose-headers': 'x-hsci-pwa-cache,x-hsci-cache-time,st-access-token,st-refresh-token',
    'access-control-allow-credentials': 'true',
    'access-control-allow-origin': 'https://www.<website>.com'
  },
  body: null,
  bodyUsed: false,
  ok: true,
  redirected: false,
  type: 'basic',
  url: '<endpoint url>'
}

I saw the browser did a Preflight request. I even tried the same payload with OPTIONS request and got 200 back.

Edit: My main goal so to GET the contents. I was trying OPTIONS to see if there were any issues with the authentication or my headers. Since this works, I am guessing I am missing something else.

{
  status: 200,
  statusText: 'OK',
  headers: Headers {
    'content-type': 'text/html',
    'content-length': '2',
    expires: 'Sat, 05 Apr 2025 23:03:24 GMT',
    'cache-control': 'max-age=0, no-cache, no-store',
    pragma: 'no-cache',
    date: 'Sat, 05 Apr 2025 23:03:24 GMT',
    connection: 'keep-alive',
    'access-control-allow-headers': 'Content-Type,Authorization,x-hsci-auth-token',
    'access-control-expose-headers': 'x-hsci-pwa-cache,x-hsci-cache-time,st-access-token,st-refresh-token',
    'access-control-allow-credentials': 'true',
    'access-control-allow-origin': 'https://www.<website>.com'
  },
  body: ReadableStream { locked: false, state: 'readable', supportsBYOB: true },
  bodyUsed: false,
  ok: true,
  redirected: false,
  type: 'basic',
  url: '<endpoint url>'
}

I am using the same request headers in my fetch() requests. So, not sure why this one particular endpoint returns nothing.

const response = await fetch(BASE_API_URL + path, {
      method: 'GET',
      headers: {
        "x-hsci-auth-token": <edgeAuth token>,
        "Origin": "https://www.<website>.com",
        "Referer": "https://www.<website>.com/",
        "accept": "*/*",
        "accept-encoding": "gzip, deflate, br, zstd",
        "sec-fetch-mode": "cors",
        "sec-fetch-site": "same-site",
        "sec-fetch-dest": "empty",
      },
    })

Javascript web extension not loading on SPA websites unless the page is refreshed

I tried to make a web extension that takes you to another website when you click on the page when you are in a specified subcategory.

It works on traditional websites like https://www.w3schools.com/html/html_intro.asp without the need for refreshing but not on https://www.instagram.com/reels/* and https://www.youtube.com/* it need refreshing in order to work.

manifest.json

{


    "manifest_version": 3,
    "name": "URL redirector",
    "version": "0.0.1",



    "content_scripts": [
      {
          "matches":["https://www.instagram.com/reels/*"],
          "js":["background_script.js"]
      }
  ]



  }

background_script.js

      function myFunction(){

        window.open('https://www.stackoverflow.com/questions/ask','_self');
        }
        
        document.addEventListener("click", myFunction);

I have tried to some solutions like executing the program only once the document is fully loaded but still it needs refreshing for JavaScript to execute

  document.onreadystatechange = () => {
    if (document.readyState === "complete") {

      function myFunction(){

        window.open('https://www.stackoverflow.com/','_self');
        }
        
        document.addEventListener("click", myFunction);
        
   
    }
  };

And tried every solution on this question but still the page needs to be reloaded for JavaScript to load.

How do I get app to export in Index.js here?

The error I am getting is: export ‘default’ (imported as ‘App’) was not found in ‘./App’ (module has no exports)

This is do with something in my index.js, supposedly. Here is my code for that:

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';
  import { App } from './App'
  import reportWebVitals from './reportWebVitals';

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
   <React.StrictMode>
   <App />
  </React.StrictMode>
  );

Webpack: Inject JS script into html page for development build

I have a local JS file that I need to inject into my HTML pages before React-Dom.

How can I go about injecting this script for local development only?

Heres my webpack set-up:

webpack.dev.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'cheap-module-source-map'
});

Webpack.common.js

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        popup: path.resolve('src/popup/popup.tsx'),
        options: path.resolve('src/options/options.tsx'),
        background: path.resolve('src/background/background.ts'),
        contentScript: path.resolve('src/contentScript/contentScript.js')
    },
    module: {
        rules: [
            {
                use: 'ts-loader',
                test: /.tsx?$/,
                exclude: /node_modules/
            },
            {
                use: ['style-loader', 'css-loader'],
                test: /.css$/i
            },
            {
                type: 'asset/resource',
                test: /.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanStaleWebpackAssets: false
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve('src/static'),
                    to: path.resolve('dist/')
                }
            ]
        }),
        ...getHtmlPlugin(['popup', 'options'])
    ],
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: '[name].js',
        path: path.resolve('dist')
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

function getHtmlPlugin(chunks) {
    return chunks.map(
        (chunk) =>
            new HtmlPlugin({
                title: 'Test',
                filename: `${chunk}.html`,
                chunks: [chunk]
            })
    );
}

Convert Array of Floats (0.0-1.0) to RGB Color

I want to convert an array of floats to RBG values. The floats range from 0.0-1.0. These floats represent pixels.

I initialize the array using pixel data from the python Pillow package. Some pseudocode illustrate:

image_data = Pillow_package('image') = [12, 235, 63, r2, g2, b2, r3, ...]
for dta in image_data:
decimal_data = (r*256*256 + g*256 + b) / (256**3 + 256**2 + 256) = [0.XX, 0.YY, ...]

I use the following code (JS) to recover the RGB values:

val = val * (256*256*256 + 256*256 + 256)
r = Math.floor(val / (256 * 256))
g = Math.floor((val / 256)) % 256
b = val % 256

And that yields the following:
Initial pixel data

The problem is when I begin the simulation. See here:
Simulation initiated

I used the getSciColor() function from Matthias Müller’s 10 Minute Physics GitHub and got the intended result, but his function ‘bins’ use FEA coloring. See before and at initiation.

const min = 0.0
const max = 1.0
val = Math.min(Math.max(val, min), max - .0001)
let d = max - min
val = d == 0.0 ? 0.5 : (val - min) / d
let m = .25
let num = Math.floor(val / m)
let s = (val - num * m) / m

switch (num) {
  case 0 : r = 0.0; g = s; b = 1.0; break;
  case 1 : r = 0.0; g = 1.0; b = 1.0-s; break;
  case 2 : r = s; g = 1.0; b = 0.0; break;
  case 3 : r = 1.0; g = 1.0 - s; b = 0.0; break;
}

I believe I need to relate his ‘bins’ from the switch function to my intended color ‘scale’, but I 1) don’t understand what they do and 2) don’t know if that’s possible. I think that would solve–what appears to be–a blending issue I am running into. Could someone explain 1) and maybe start me down 2) assuming it is possible? Thanks.

How to have 20 buttons with different texts when pressed in JavaScript?

I have about 20 buttons in my HTML code and I want to write a JavaScript code that changes the content of a button when it is pressed. Every button needs to have its specific content that it will change into when pressed. Any help is appreciated, I currently have written this but I would like a better solution:

for (let i = 0; i < btnOpenPage.length; i++) {
    btnOpenPage[i].addEventListener("click", openPage);
}
    
if (document.getElementsByClassName("second").clicked === true) {
    document.querySelector(".continut").innerHTML = `text for btn 2`;
}
    
if (document.getElementsByClassName("third").clicked === true) {
    document.querySelector(".continut").innerHTML = `text for btn 3`;
}
    
btnClosePage.addEventListener("click", closePage);
overlay.addEventListener("click", closePage);

React-chartjs-2 bar chart only shows first dataset when passing batch API response

**Description:**

I’m building a Shariah Compliance Investment Dashboard using React and `react-chartjs-2`.

I fetch data for multiple stock tickers (e.g., “IBM, KO”) from an API. The response contains valid financial ratios for each ticker. The problem is that the chart only displays the bar for the first ticker (e.g., IBM), even though the API response and console log show data for both tickers.

**Expected Behavior:**

Each company should have its own dataset and bar in the chart.

**Actual Behavior:**

Only the first ticker’s data is plotted. The second (and others) are ignored.

I’ve confirmed that my state (`complianceData`) includes valid data for each ticker and that it’s mapped into datasets, but the chart renders only one dataset.

**What I tried:**

– Confirmed that the API returns valid JSON with entries for each ticker

– Verified in the console that all ticker data is present

– Used `Object.entries(complianceData).map(([symbol, details]) => ({…}))`

– Created dynamic datasets using Chart.js, but only the first one displays

– Tried flattening, spreading, and restructuring the chart data

**Expected:**

I expect each ticker to be shown as a separate bar in the chart.

**Screenshot Evidence:**

– API response JSON

– Console.log output

– Chart rendering only first bar

(See attachments below)

API response JSON

Console.log output

Chart rendering only first bar