Using an object as an array index in Javascript

I have been utilizing a crossword application from this specific repository: https://github.com/jweisbeck/Crossword . The issue I am facing is that the program is using jquery version 1.6.2 while my entire project is built on jquery-3.1.1 version. The error seems to be originating from this part of the code: 

buildEntries: function() {
    var puzzCells = $('#puzzle td'),
        light,
        $groupedLights,
        hasOffset = false,
        positionOffset = entryCount - puzz.data[puzz.data.length-1].position; // difference between total ENTRIES and highest POSITIONS

    for (var x=1, p = entryCount; x <= p; ++x) {
        var letters = puzz.data[x-1].answer.split('');

        for (var i=0; i < entries[x-1].length; ++i) {

            light = $(puzzCells +'[data-coords="' + entries[x-1][i] + '"]');

            if($(light).empty()){
                console.log($(light));
                $(light)
                    .addClass('entry-' + (x-1) + ' position-' + (x-1) )
                    .append('<input maxlength="1" val="" type="text" tabindex="-1" />');
            }
        }
    }

    // Put entry number in first 'light' of each entry, skipping it if already present
    console.log(entries);
    console.log(puzz.data);
    for (var i = 0; i < entryCount; i++) {
        $groupedLights = $('.entry-' + i); 
        if(!$('.entry-' + i +':eq(0) span').length){
            $groupedLights.eq(0)
                .append('<span>' + puzz.data[i].position + '</span>');
        }
    }

    util.highlightEntry();
    util.highlightClue();
    $('.active').eq(0).focus();
    $('.active').eq(0).select();            
}

The error seems to be occurring at the line:

light = $(puzzCells +'[data-coords="' + entries[x-1][i] + '"]');

The browser displays this error message:

Error: Syntax error, unrecognized expression [object Object][data-coords="1,6"]

I suspect this could be due to the jQuery version compatibility issue or maybe the program is using [object Object] as an index. Since I am new to jQuery, I am unsure about the exact reason. I attempted to use jQuery Migrate without success. Additionally, trying to switch back to jQuery 1.6.2 also didn't help as the web browser couldn't locate jQuery at all due to me working with Typescript and having to install jQuery through a .d.ts file. Any tips or suggestions? Thank you in advance.

javascriptjquerytypescript

Answer №1

Here's a unique concept:

Transform an object into an array index

While this may not be achievable with standard Objects/Arrays, you can accomplish it using a Map:

let map = new Map(),
    key = {id: '##'};

map.set(key, [1,2,3,4,5]);

console.log(map.get(key)); //[1,2,3,4,5]

Learn more about Maps in JavaScript here!

Answer №2

The error message displays "[object Object]" because an attempt is being made to concatenate a jQuery object with a string to form a selector, resulting in an invalid operation.

The problematic line in code can be pinpointed as follows:

var puzzCells = $('#puzzle td') // holds jQuery object

// later on...
light = $(puzzCells + '[data-coords="' + entries[x-1][i] + '"]');

This issue does not stem from the version of jQuery in use; rather, it is a syntax-related matter.

To resolve this issue, it is recommended to utilize the filter() method on the puzzCells object instead of simply appending it to a selector. Consider implementing the following correction:

light = puzzCells.filter('[data-coords="' + entries[x-1][i] + '"]');

Answer №3

When combining an object (puzzCells) and a string in JavaScript, the variables are converted to strings before concatenation takes place. If you try to use WHATEVEROBJECT.toString(), you will likely get [object Object], resulting in an error message with that content.

This issue is not specific to jQuery; it occurs at a fundamental level in JavaScript itself.

puzzCells represents a jQuery object that allows for the use of jQuery methods. In this scenario, you should utilize the filter method like so:

light = puzzCells.filter('[data-coords="' + entries[x-1][i] + '"]');

To learn more about the filter method, visit: http://api.jquery.com/filter/

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 a 500 error with Ajax in Laravel 5.2

Rediscovering Laravel 5.2 - Starting a Fresh Application After getting back into Laravel, I encountered a challenge with an AJAX post request. Essentially, when you reorder the list, AJAX is triggered to modify the order and save it in the database. Desp ...

javascriptphpajaxlaravel

Python Selenium not registering button click

I'm working on scraping data from the website using Python with Selenium and BeautifulSoup. This is the code I have: driver = webdriver.Chrome('my file path') driver.get('https://www.ilcollege2career.com/#/') first_click = Web ...

javascriptpythonhtmlpython-3.xselenium

Unable to suppress error in AngularJS $http.get() call when using catch() method

Below is a simplified version of the code I'm working with, running in CodePen for example: var app = angular.module("httptest", []); app.controller("getjson", ["$scope", "$http", function($scope, $http) { $http.get("https://codepen.io/anon/pen/L ...

javascriptangularjserror-handlingangular-promise

"Instead of sending JSON to the AJAX jQuery request, the PHP `json_encode` function is used

Creating a simple contact form as a WordPress plugin, I have developed a form as a popup within the same page: <form method="post" id="w_form" enctype="multipart/form-data"> <label for="first_name" class="text-secondary">First Name</la ...

phpjqueryjsonajaxwordpress

Unable to submit /api/sentiment

I'm currently troubleshooting the /api/sentiment endpoint in postman and encountering a "cannot POST" error. I have confirmed that the routes are correct and the server is actively listening on port 8080. Interestingly, all other endpoints function wi ...

javascriptnode.jsexpress

Adding or removing rows within an array in a hybrid Vue project - a step-by-step guide

Recently, I created a small web application to assist in organizing my project ideas. Check it out here: https://codepen.io/aibrindley/pen/ELXajM Now, I am working on enabling users to add items to the array directly from the interface. It would also be c ...

javascriptvue.js

JavaScript array with more than 4 elements

I am working on a program where I have created an array and now want to display all the words that contain more than 4 letters. Check out my code snippet below: function oppC(){ var ord = ["Apple", "Two", "Yesterday", "mother", "lol", "car", "co ...

javascripthtmlcssarrays

Ways to control the quantity of ajax POST requests?

Currently, I am utilizing angular (in case it makes a difference) and endeavoring to restrict the quantity of ajax POST requests that my browser sends using javascript - particularly interested in vanilla javascript on the xmlHttpRequest object. Any insigh ...

javascriptajaxangularjs

Issue with Vue.js Typescript when setting a debounced function

Upon debouncing a function in my Vue.js application, I encountered the following error message: Type 'DebouncedFunc<(queryParams: QueryParams, page?: number) => Promise<void>>' is not assignable to type '(queryParams: QueryPa ...

javascripttypescriptvue.jswebfrontend

Passing a service into a promise in Angular 2 using TypeScript

Is there a way to pass a service into a promise? I am currently working on a promise that will only resolve once all the http requests are complete. However, I am facing an issue where this.jiraService is undefined. Is there a method to pass it to the co ...

angulartypescriptpromise

Updating Error: Unable to establish connection with IP address 104.16.21.35 on port 80; Error code: ECONNREFUSED. This issue is being handled by the _

I need help updating my Angular version from 5 to 6 and I'm following these steps: Want to upgrade project from Angular v5 to Angular v6 After running the commands ng update @angular/cli and ng update @angular/core, I encountered the err ...

javascriptjsonangularangular5angular6

Retrieve a PHP file utilizing Javascript or JQuery

Is there a more straightforward method than using ajax to retrieve the contents of an HTML or PHP file and place it within a div on the current page? I am familiar with the process through ajax, but I am curious if there is a simpler alternative that doe ...

phpjavascriptjqueryajax

The script fails to start using npm start, however, it runs smoothly when using node server.js

For a while now, I've been facing an issue that I just can't seem to resolve. When I navigate to my project's src folder and execute `node server.js`, everything functions as expected. I can access the application at http://localhost:3000/cl ...

javascriptnode.jsnpmpackage.json

Syntax error occurs while attempting to render the return statement in a React Component

Just starting out with React and encountering a syntax issue that has me stumped. I'm working on a React Component and I thought I had the opening/closing { & }'s correct, but clearly there's something missing based on the error message it&a ...

javascriptreactjsreact-hooksreact-component

Exporting modules in TypeScript using "module.exports"

While working on my Yeoman generator, I initially wrote it in JavaScript like this: "use strict"; var Generator = require("yeoman-generator"); var chalk = rquire("chalk"); module.exports = class extends Generator { initializing() { this.log( c ...

typescriptyeoman

Input values in Angular are not being updated according to the corresponding model values

My Angular application features two routes that share the same controller and partials. Despite the shared code, the controller and partials behave slightly differently depending on the route being used. Here are the routes: $routeProvider.when('/joi ...

javascriptangularjs

Tips for arranging years in descending order in the material-ui Date Picker's calendar interface

This is the Code I Used - import "./styles.css"; import { DatePicker } from "@mui/x-date-pickers"; import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; import { AdapterDateFns } from "@mui/x-da ...

javascriptreactjsmaterial-uidatepickermomentjs

Managing Page Refresh in an ASP.NET MVC Single Page Application

I am currently developing a single-page application using ASP.NET MVC. The starting point of the application is /home/index. All other views will be loaded via ajax. Now, let's say the user is on the page /home/index#/home/widgetdemo and decides to ...

jqueryajaxasp.net-mvcsingle-page-application

Ways to transfer information from a function within one element to another element

I have two components: one that logs the indexes of a carousel and I need to pass these indexes into the second component. First Component <template> <div class="container container--white"> <Header /> <carousel-3d @a ...

javascriptvue.js

Keeping extensive files/information on disk in order to alleviate browser memory usage in JavaScript

Currently, I am faced with a challenge involving the encryption of very large files. Unfortunately, my browser keeps crashing due to running out of memory while trying to handle these massive files. To address this issue, I am considering transferring som ...

javascriptcaching