Struggle to link a string together effectively for proper concatenation

I'm currently working on a project that involves utilizing the Wikipedia API. My goal is to create a link for each list item, but I'm encountering difficulty with proper concatenation.

Here's the code snippet I'm using:

  for (var j=0; j < wikiData.length; j++) {
    var articleAuthor = wikiData[1][j];
    var articleInfo = wikiData[2][j];
    var linkAuthor = wikiData[3][j];
    domCache.$wikiArticlesList.append('<li class="articleItem">'+ '<span>' + '<a href =' + '"linkAuthor">' + articleAuthor + '</a>' + '</span>' +'<span class="shortInfo">' + articleInfo +'</span>' + '</li>'); 
    console.log(j + " " + articleAuthor);
    console.log(j + " " + articleInfo);
    console.log(j + " " + linkAuthor);
  }

The problematic line of code: var linkAuthor = wikiData[3][j];

I am struggling to correctly concatenate the 'linkAuthor' variable to the 'href' attribute. I understand that the issue lies in the usage of apostrophes, but I can't seem to figure it out on my own. Any fresh perspective or assistance would be greatly appreciated.

Link to my Codepen project

Answer №1

    domCache.$wikiArticlesList.append('<li class="articleItem">'+ '<span>' + '<a href =' + linkAuthor + '>' + articleAuthor + '</a>' + '</span>' +'<span class="shortInfo">' + articleInfo +'</span>' + '</li>'); 

The author's website URL was mistakenly enclosed in quotation marks.

Answer №2

To simplify the process of concatenating large strings of HTML, you can rewrite the append function like this and use array join for better debugging:

domCache.$wikiArticlesList.append([
 '<li class="articleItem">',
    '<span>',
        '<a href="',
            linkAuthor,
        '">',
            articleAuthor,
        '</a>',
        '</span>',
        '<span class="shortInfo">',
        articleInfo,
    '</span>',
 '</li>'
].join(''))

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

Tips for populating fake data into a mongoose database with user password validation in place

Looking for guidance on seeding dummy user information into a mongoose database. The user model includes password confirmation validation for real users submitting forms online, and this feature must remain intact. Despite running mongod and using gulp in ...

Troubleshooting: Bootstrap accordion malfunctioning when using a numerical ID

Issues have arisen after updating Bootstrap to version 4.2.1. In this latest version, using id="#12" in an accordion does not seem to work properly. However, in previous versions, it worked just fine with the same id="#12". Any suggestions on how to resolv ...

Guide to creating a clean and minimalistic tabbed menu using CSS

Looking for CSS code for the tabbed menu shown above. I've tried several options but haven't been able to achieve the exact design I want. Here is the directive, HTML, and CSS code provided: <div id="tabs"> <ul> <li> ...

Pulling data from a MySQL database using AJAX and PHP to convert it into a JavaScript variable, resulting in

I am attempting to retrieve MySQL data using PHP, convert it to JSON, and then pass it into my JS variables for Chart.js. The JSON generated by PHP appears correct. However, when trying to access the data within my variables, the console is displaying them ...

Could offering a Promise as a module's export be considered a legitimate approach for asynchronous initialization in a Node.js environment?

I am in the process of developing modules that will load data once and create an interface for accessing that data. I am interested in implementing asynchronous loading of the data, especially since my application already utilizes promises. Is it considere ...

Error: The function res.getHeader is not recognized within the Next.js API environment

I am currently working on a web application using NextJS 13, TypeScript, Next Auth v4, Prisma (using SQLite for development), and OpenAI. While accessing the API endpoint, I encountered an error in the console with the following message: error - TypeError ...

CSS - Transitioning fixed positioning to scrollable

I am currently working with code to display an image in a 'scale to fill' manner. I originally used this code for a previous project to set up a background image on a website, and now I want to adjust the positioning to allow scrolling. However, ...

Hide the chosen option within the following select box using jQuery

How can I hide the selected option in the first select box in the second one using jQuery? Here is my HTML code. <div> <select class="fields-mapping"> <option>Option1</option> <option>Option2</option> <op ...

Adjusting scroll position delay for a fixed element when using an Android device

I am experiencing an issue with an element that is supposed to become fixed when scrolling past 145px and then unfixed when scrolling back up. While this functionality works smoothly on desktops, there seems to be a delay on mobile devices, particularly on ...

Error: Unable to locate module: Could not find '@/styles/globals.scss'

I'm encountering an error message with my import statement for the SCSS file in my _app.tsx. Can someone help me find a solution? I'm working with Next.js and have already exhausted almost every resource available online to fix this issue. ...

Ways to reduce the size of the border on the bottom in HTML/CSS

Currently, I am working with a div container (utilizing bootstrap.min.css) that contains another class called divborder. The length of the border-bottom in divborder is quite long and I'm wondering how I can adjust it to be shorter. Below is a snippe ...

Issue with Accordion Panel Content Scroll Bar

Hello there, I've encountered a puzzling problem with my website. My objective is to insert a Time.ly Calendar widget into one panel of my accordion. On this page, "TOURNAMENTS: , the widget appears exactly as desired. However, when I replicate the c ...

How to pass variables in AngularJS

When displaying data in a grid, I need to change the button icon on click of the active or inactive button. The functionality is working well, but I am having trouble finding the clicked active button to change its icon. In jQuery, we can use "this", but ...

What is the process of sending a component as props using props in react?

Currently, I am utilizing the react-grid library provided by dev-express. Within this library, there is a Table component that allows us to pass in a Cell component. In my CustomCell component, I have integrated the Menu component from Material UI. < ...

Adjusting the size of a Checkbox with CSS

Adjust the width of the checkbox for the call field to 25 pixels, ensuring it is displayed only when the left margin is clear. I'm having trouble figuring this out, even though it's probably something simple again. I double-checked that my style ...

Automated Testing with Robot Framework: Utilizing Javascript to Click on a Button

Inspecting the web page <span jsslot=""> <button class="LkLjZd ScJHi IfEcue HPiPcc KXT7c" jsaction="click:yTqzwd" jsname="HxVe9c" autofocus="">Click Here</button> </span> I am tryin ...

Proper approach for mapping JSON data to a table using the Fetch API in a React.js application

Struggling to map some elements of JSON to a Table in Customers.jsx, but can't seem to figure out the correct way. How do I properly insert my Fetch Method into Customers.jsx? Specifically managing the renderBody part and the bodyData={/The JsonData/} ...

Upcoming verification with JSON Web Token

I am looking to incorporate JWT auth into my Next app. Currently, I have mapped out the flow as such: User enters email and password to log in Server responds with status 200 and a jwt access token in httpOnly cookies My main dilemma lies in deciding on ...

What methods does Angular use to handle bounded values?

Consider this straightforward Angular snippet: <input type="text" ng-model="name" /> <p>Hello {{name}}</p> When entering the text <script>document.write("Hello World!");</script>, it appears to be displayed as is without bei ...

Navigate to a refreshed version of the page with varying parameters using React Navigation

Currently, I am utilizing React Navigation for navigating between different pages within my app. One of the pages is the Profile page which displays a user info card along with their posts. Within this Profile component, I have integrated the Post componen ...