What is the best way to construct a template string to display the contents of an object?

Here is an array of objects:

var students = [
  { 
    name : "Mike",
    track: "track-a",
    points : 40,
  },

  { 
    name : "james",
    track: "track-a",
    points : 61,
  },  
]

  students.forEach(myFunction);

function myFunction (item, index) {

  for( var key in item ) {
    console.log(item[key])
  }
}

I am looking to display the strings inside a div as follows. For point values greater than 50, I will print "Passed" otherwise "Failed", followed by the name and track details like below:

Failed: Mike in track track-a
Passed: james in track track-1

How can I create a template string to achieve this output?

Answer №1

Discover the power of template literals in JavaScript!

var students = [
  { 
    name : "Mike",
    track: "track-a",
    points : 40,
  },

  { 
    name : "james",
    track: "track-a",
    points : 61,
  },  
]

  students.forEach((student) => {
    console.log(`${student.points > 50 ? 'Passed' : 'Failed'}: ${student.name} in track ${student.track}`);
  });

Answer №2

To achieve this, you can utilize the map function on the array directly without the need for an additional function. Check out the example below:

var students = [
  { 
    name : "Mike",
    track: "track-a",
    points : 40,
  },

  { 
    name : "james",
    track: "track-a",
    points : 61,
  },  
]

const myString = students.map(student => student.points > 50 ? `Passed: ${student.name} in track ${student.track}` : `Failed: ${student.name} in track ${student.track}`);

console.log(myString)

Answer №3

Source

let x = "Goodbye";
let y = "Earth";
let template_string = `${x} ${y}!`; // Using backticks instead!

console.log( template_string )

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

Callbacks in Laika tests go untriggered

Meteor.collection.insert() allows for the use of a callback as one of its arguments. To demonstrate, you can start a new Meteor project and execute the following code in the browser's console. my_collection = new Meteor.Collection("myCollection"); my ...

Various ways to declare functions in JavaScript

1)Function declaration with variable name: var x = function (a, b) {return a * b}; 2)Another type of function in JavaScript within Angular1: var method = { add_category: function(data, success, failure) { $upload.upload({ url: b ...

npm will only update when modifications are made to index.js

Recently diving into the world of React, I've encountered an issue with updating my website when making changes to files within my project. While modifications to the index.js file reflect on the site, any adjustments made to imported apps do not get ...

Automatically simulate the pressing of the enter key in a text field upon page load using Javascript

I am looking to simulate the pressing of the enter key in a text field when a page is loaded. Essentially, I want the text field to automatically trigger the enter key press event as if it had been pressed on the keyboard by the user. Below is an example o ...

Stop users from submitting empty forms

I'm facing an issue with my form where I want to prevent it from being submitted if the fields are blank and also highlight those blank fields. The code I currently have works when trying to submit with blank fields, but for some reason, it doesn&apos ...

Sound did not play when certain pictures made contact with other pictures

English is not my native language and I am a beginner in programming. I know my explanation may not be perfect, but I'm trying my best to communicate my ideas clearly. Please be patient with me and offer constructive feedback instead of downvoting, as ...

Guide on implementing ng-repeat within a nested JSON structure in your Ionic app

Struggling with implementing ng-repeat in a nested json object. { "title": "Important message 01", "img": "any url image here", "authorPhoto": "http://lorempixel.com/40/40/people/4/", "author": "John Doe", "datePos ...

Steps for initializing a Vue component instance by passing parameters

Being a novice in the realm of Vue, I am eager to gain knowledge on how to effectively create and reuse Vue components. However, I am encountering an issue where the initial data passed to a component does not update upon a click event. Shown below is a ...

Exploring Parameters to Customize Search Results in React

I am currently working on implementing a data filtering system based on user input. However, it seems that the data disappears whenever I enter something into the search box. Upon inspecting the dev tools, I can see that the query state is being saved pro ...

Is there a way to trigger the activation of the datepicker during the `onLoad` event?

For my project, I am utilizing this datepicker. While I am familiar with using scripts to handle changes in the date value, I am unsure of how to implement it on page load. $('.date_set .date').datepicker({ startView : 0, ...

Could there be a mistake in the way array combinatorics are implemented in JavaScript?

Having encountered the necessity for generating unique combinations when dealing with multiple arrays, I developed this script. While it functions as intended during the combination process, storing the result in a final array yields unexpected outcomes. ...

The class name remains unchanged despite the change in value

I am currently working on a webpage that features two interactive tabs. The goal is to have one tab highlighted as "active" while the other remains inactive when clicked, and then switch roles when the other tab is selected. Below is the code snippet I ha ...

Is there a way for me to determine if a domain has been registered by the client?

I'm interested in creating a Web app that allows users to enter a domain name and then uses JavaScript to check its availability. I'm wondering if there's a method to do this without relying on my own hosting server. Is it possible to send a ...

Maintaining the order of elements in Angular's insertion process

I am currently facing an issue with my HTML fragment that iterates over a key and value collection. Everything works perfectly when I insert values into an object and iterate through it using the HTML fragment. However, in order to maintain a specific key ...

Adjust the dimensions of an image post-creation

let displayedImage = Ti.UI.createImageView({ image : somefile.png, height:'100', width:'100' }); The code above shows how I created the image. But now, I am wondering how I can resize the image after its initial creation. ...

Trouble with refreshing button after resolving routes in Angular UI Router

My Angular UI router is giving me trouble. When I navigate to the state below, everything works smoothly. However, if I refresh the page, the resolve function retrieves the data, injects it into the controller, but the view does not load. Essentially, th ...

Use jQuery to change the background color when clicked

Below is the HTML code with UL and LI elements: <UL> <LI><span id='select1'>Text</span></LI> <LI><span id='select2'>Text</span></LI> <LI><span id='select3'>Tex ...

Axios is passing an array instead of a JSON object when making a POST request

I am trying to make a post request using axios in my Vue.js front-end to communicate with Laravel on the backend. const data = { file: {id} } axios.post('api/documents/remove', data).then((response) => { ...

Guide to developing a custom plugin for Nuxt.js

This is the content of my rpc.js plugin file: const { createBitcoinRpc } = require('@carnesen/bitcoin-rpc') const protocol = 'http' const rpcuser = 'root' const rpcpassword = 'toor' const host = '127.0.0.1&apo ...

Opting for PHP over JSON in a jQuery live search code

Is it possible to modify my jQuery Google Instant style search script to pull content from a PHP script instead of using the BingAPI? Below is the current code being used: $(document).ready(function(){ $("#search").keyup(function(){ var searc ...