Display a singular list of items within one HTML tag for a custom field in Meteor.user, instead of each item having its own separate tag

There is a custom user field that is filled by the user upon clicking a button with an ID of an item from another collection. However, when returned, all saved items are displayed in one HTML tag instead of each saved item having its own tag. The result ends up looking like this

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

For example:

<p>CategoryPublication-98,CategoryPublication-2,CategoryPublication-57</p>

Instead of how it should be:

<p>CategoryPublication-98</p>
<p>CategoryPublication-2</p>
<p>CategoryPublication-57</p>

This is the publish function:

Meteor.publish(null, function() {
  return Meteor.users.find({_id:{$in:fields.name}}).fetch();
});

The HTML template:

<template name="userTimeline">

  {{#if currentUser}}
  <div class="timeline-user">
{{#each name}}
 <p>{{name}}</p>

  {{/each}}
  </div>

{{/if}}
</template>

The helper function:

Template.userTimeline.helpers({

  name: function() {
    return Meteor.user().name;
  }
});

The insert function:

Template.CategoriesMain.events({
  'click .toggle-category': function(e){
          var ob = this._id;
          var id = $.makeArray( ob );

          console.log(id);

          e.preventDefault();
          Meteor.call('addingCategory', id, function(error, user){ console.log(id)});
      },
});

The methods used:

Meteor.methods({
    addingCategory: function(name) {
        console.log(Meteor.userId());
        Meteor.users.update({
      _id: Meteor.userId()
    },
    {
      $addToSet: {

        name: name
      }
    });
    }
});

Answer №1

In the given code snippet:

{{#each name}}
  <p>{{name}}</p>
{{/each}}

There seems to be confusion regarding the value of name inside the <p></p> tags. As you are only dealing with an array of strings and not objects, there is no key called name in the array.

To clarify, make the following adjustment:

{{#each name}}
  <p>{{this}}</p>
{{/each}}

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

Can a json file be generated and saved using PhoneGap's file system and JavaScript?

Is it feasible to gather user data and save it as a JSON file for JavaScript to retrieve each time the user interacts with the application? ...

Is there a way to effectively sort through a stdClass object?

Upon converting JSON to Arrays, I now have the following data: stdClass Object ( [success] => 1 [total] => 850 [message] => [data] => Array ( [0] => stdClass Object ( ...

Remove any numbers that are below the maximum value of the range immediately following it

Here is a list of numbers: 1 200 40 6000 117000 112000 34 90 180020 0 1320 24975 84 116 186 224 315070 10800 333333 266000 How can we remove certain numbers? https://i.sstatic.net/eytWu.png The rule is to remove any number that is lower than the maximum ...

Is there a way for me to view the specifics by hovering over a particular box?

Whenever I hover over a specific box, detailed information appears, and when I move the mouse away, the details disappear. HTML <nav> <div> <div class="nav-container"> <a href="./about.html" ...

steps for closing when i click the x button

I am currently working on a task list project, and I am encountering an issue where the close button does not function as expected when clicked. My expectation is that upon clicking the close button, the corresponding item should close. ...

Issue in Three.js: Unable to modify Boolean value within the onLoad function

I'm utilizing the Three.js Loading Manager to control the initiation and halting of my requestAnimationFrame animation cycle. Here's the code snippet: var loadingManager = new THREE.LoadingManager(); var isAnimationRunning = new Boolean(); ...

Utilizing vue-i18n for translating the default value of a Vue component's property

Looking for a solution to localize the default value of a component prop using vue-i18n. Here's an example: export default { name: 'ExampleComponent', props: [{ prompt: { required: false, type: String, default: $t(& ...

Console does not display AJAX response

Currently, I am utilizing AJAX to fetch form data from a Django application and my objective is to display the response in the console. $.ajax({ type: 'GET' , url: url, data: {'PUITS': PUITS ...

Show the text of a link when it is selected using the tab key in a JavaScript event

Snippet: <a href="#about"> About <abbr title="The Little Taco Shop">About LTS</abbr></a> Show the text "About LTS" when the tab key is pressed on the keyboard. ...

Adjust the height of one div based on the height of another div

I need assistance with creating a dynamic div height based on the content length of another div. For instance, when DIV A contains certain information and DIV B displays feedback related to DIV A. If DIV B has more content than DIV A, I want DIV A to rema ...

Utilize JavaScript to save user-selected CSS styles by setting a cookie in jQuery

I am currently using a jQuery styleswitcher to change the stylesheet upon click. Despite trying various solutions, I have been unable to find a resolution to this issue. Could someone please assist me in setting a cookie for this functionality? Markup: ...

Passing props to component data in Vuejs: Best practices

I'm experimenting with Vue 2.0 and I've encountered a bit of confusion. How can I properly pass props to a component's internal data? I've followed the documentation, but it still seems unclear. HTML <service-list :services="model"& ...

call a custom form submission using jquery first, followed by a regular form submission

Is it possible to attach a submit() handler to a form in order to execute an ajax request, and then have the form submit itself normally once the request is complete? Using $('#myForm').submit() seems to just result in the same function being cal ...

Issue with ng-grid in AngularJS: Data does not appear after resizing columns

Currently, I am encountering a problem where ng-grid data is not being displayed when column resizing occurs after changing the column names. To demonstrate this issue, I have created a plunkr at - http://plnkr.co/edit/eV9baoDOV9A46FZmKW8G?p=preview I wo ...

Bootstrap Modal for WooCommerce

I'm facing an issue while trying to create a modal window using woocommerce variables ($product). The problem lies in the placement of my modal and accessing the correct product id. Here is the code snippet I've been working on. Unfortunately, i ...

Share a URL seamlessly without the need for a page refresh or AJAX request

I am looking for a way to trigger a script to save an image to the server when a link is clicked, without actually navigating to a different page. Even though I tried using e.preventdefualt to prevent the link from submitting, it didn't work as expec ...

Modifying the image source using state management in ReactJS

I am currently working on creating an Image slider similar to an e-commerce product in Reactjs. In regular javascript, changing the image source is straightforward, but how do we accomplish this in React? Since React involves dealing with state, it adds a ...

Can we include an option to display all pages in one row on a single page?

Is it possible to include an option to display all rows alongside the current options of 10, 15, and 100? I've been unable to locate this feature in the documentation: Check out the Codesandbox example: https://codesandbox.io/s/muidatatables-custom-t ...

The default value of the input color in HTML/NextJS does not update when changed

Issue: The color input does not change when the default value (#ffffff) is declared. https://i.sstatic.net/BpqUj.png However, it works normally if I don't declare a default value. https://i.sstatic.net/0dBd6.png Note: Using NextJS framework. <i ...

Combine various 2D numpy arrays to create a single 3D numpy array

I am working on a project where I need to combine multiple 2-D numpy arrays into a single 3-D numpy array and then save it as a compressed file in a specific directory for future use. As I iterate through a list, I compute forecasts for different hazards. ...