What is the process of transforming the contents of a file into strings?

Question

What is the process of transforming the contents of a file into strings?

I need to transform the contents of a txt file into a specific format:

1||fun||ball
2||job||hammer
3||run||feet

The desired output format is:

<dt>1</dt><dd>fun <img src="ball.png"></dd>
<dt>2</dt><dd>job <img src="hamm.png"></dd>
<dt>3</dt><dd>run <img src="feet.png"></dd>

I attempted the following code:

const openrooms = `1||fun||ball
     2||job||hamm
     3||run||feet`;

const roomlist = openrooms.split('\n');

for (var rooms in roomlist) {
  room = roomlist[rooms].split('||');
  for (var {roomid, name, icon} in room) {
    result = `<dt>${room[roomid]}</dt><dd>${room[name]} <img src="${room[icon]}"></dd>`;
  }
}
document.getElementById("destination").innerHTML = result;

<div id="destination"></div>

However, I only receive "undefined" as the result. Can someone please help me identify the issue? Feel free to test it using the fiddle link below:

https://jsfiddle.net/db6hy8a0/

javascript for-loop

Answer 1

Answer №1

Give it a shot:

const roomData = `1||apple||red
     2||cat||blue
     3||dog||green`;

const roomsList = roomData.split('\n');

const output = roomsList.map(item => {
  var splitItem = item.split('||')
  return `<dt>${splitItem[0]}</dt><dd>${splitItem[1]} <img src="${splitItem[2]}.png"></dd>`
}).join('')

document.getElementById("destination").innerHTML = output;

<div id="destination"></div>

Answer 2

Give it a shot:

const roomData = `1||apple||red
     2||cat||blue
     3||dog||green`;

const roomsList = roomData.split('\n');

const output = roomsList.map(item => {
  var splitItem = item.split('||')
  return `<dt>${splitItem[0]}</dt><dd>${splitItem[1]} <img src="${splitItem[2]}.png"></dd>`
}).join('')

document.getElementById("destination").innerHTML = output;

<div id="destination"></div>

Answer 3

Answer №2

The secondary loop makes an attempt to break down the strings from the second division.

Consider trying something along these lines:

const availableSpaces = `1||happy||sun
2||work||nail
3||walk||toes`
 
const spaces = availableSpaces.split('\n')

output = ""
spaces.forEach(place => {
  const [number, activity, tool] = place.split('||')
  output += `${number} space: ${activity} - ${tool}\n`
})

console.log(output)

(But why not simply save them in an object initially?)

Answer 4

The secondary loop makes an attempt to break down the strings from the second division.

Consider trying something along these lines:

const availableSpaces = `1||happy||sun
2||work||nail
3||walk||toes`
 
const spaces = availableSpaces.split('\n')

output = ""
spaces.forEach(place => {
  const [number, activity, tool] = place.split('||')
  output += `${number} space: ${activity} - ${tool}\n`
})

console.log(output)

(But why not simply save them in an object initially?)

Answer 5

Answer №3

let roomData = `1||happy||sun
 2||sad||moon
 3||sleepy||stars`;


const dataDisplay = roomData.split("\n").map((line)=> {
const elements = line.split("||");
return `<dt>${elements[0]}</dt><dd>${elements[1]} <img src="${elements[2]}.png"></dd>`
})


document.getElementById("dest").innerHTML = dataDisplay;

Answer 6

let roomData = `1||happy||sun
 2||sad||moon
 3||sleepy||stars`;


const dataDisplay = roomData.split("\n").map((line)=> {
const elements = line.split("||");
return `<dt>${elements[0]}</dt><dd>${elements[1]} <img src="${elements[2]}.png"></dd>`
})


document.getElementById("dest").innerHTML = dataDisplay;

What is the process of transforming the contents of a file into strings?

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to activate Toast notification before the window's onbeforeunload event?

establish a connection with the node server and initiate the automatic mask detection feature

Trigger CSS transformations when a button is clicked

sophisticated authorization structure for sails.js and angular

Mastering Node.js: Writing to a Write Stream on the 'finish' Event

Guide on declaring package.json during library publication in Angular 6

I'm having trouble with the calculator, unable to identify the issue (Typescript)

Moving information from Ajax to PHP

Start by building a foundation project that incorporates Angular JS and CodeIgniter together

Updating database records using AJAX in Laravel

a guide to incorporating Google Maps into your website using latitude and longitude coordinates

The Javascript alert is displaying twice in Internet Explorer

Is it possible to create a column break within a CSS multicolumn design?

Vue encountered an unexpected issue: fn.bind is not recognized as a function

Tips for adjusting image dimensions with url() method in css

Control the options of the Select menu using ajax

Does anyone know of a way to integrate a calendar feature into a React application using a library

Access array information using AngularJS

The combination of $watchCollection and multiple expressions is not effective

Tips on using CSS to hide elements on a webpage with display:none