Question 174359 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to turn string into objects with properties

I’m fetching a string that looks like this

Ebonie Rangel
7175 Yukon Street
(507) 833-3567
Geography
Keenan Ellwood
2 Elm Lane
(894) 831-6482
History
Kailan Smart
795 Harvard Street
(925) 856-5167
Biology
Kaydan Hirst
9 East Lakeview Ave.
(939) 812-6141
Programming
Isabelle Prentice
700 Rock Maple St.
(899) 875-8627
Math

and I’m trying to create an array of objects for each person from the string to have something like this

[
 {
  name: 'Ebonie Rangel',
  address: '7175 Yukon Street',
  phone: '(507) 833-3567',
  course: 'Geography'
 },
 {
  name: 'Keenan Ellwood,
  address: '2 Elm Lane',
  phone: '(894) 831-6482,
  course: 'History'
 },
 ...etc
];

What I’ve tried is to split the string and create an array, and then to map through it and create properties there with values, but the problem is the string I fetched is already broken down by something and I cannot figure it out by what I should split it.

let button = document.getElementById('get-text-btn');
      let textArea = document.getElementById('my-text-area');
      
      button.addEventListener('click', function () {
        loader.style.display = 'inline-block';
        fetch('https://v-dresevic.github.io/Advanced-JavaScript-Programming/data/students.txt')
          .then(function (response) {
            if (response.status !== 200) {
              throw Error('Error while reading file.');
            }
            return response.text();
          })
          .then(function (text) {
            // textArea.innerHTML = text;
            const redovi = text.split('n'); 

            const objekti = redovi.map((red) => {
              const [name, address, phone, course] = red.split('n');

              return {
                name: name.trim(),
                address: address,
                phone: phone,
                course: course,
              };
            });
console.log(objekti)
          })
          .catch(function (err) {
            textArea.innerHTML = 'Fetch problem: ' + err.message;
          })
          .finally(function () {
            loader.style.display = 'none';
          });
      });
<button id="get-text-btn">Get Data</button>
    <div id="loader"></div>
    <textarea id="my-text-area" rows="30"></textarea>

What am I doing wrong?

Tags:

2

Answers


  1. 0 
    const data = `Ebonie Rangel
7175 Yukon Street
(507) 833-3567
Geography
Keenan Ellwood
2 Elm Lane
(894) 831-6482
History
Kailan Smart
795 Harvard Street
(925) 856-5167
Biology
Kaydan Hirst
9 East Lakeview Ave.
(939) 812-6141
Programming
Isabelle Prentice
700 Rock Maple St.
(899) 875-8627
Math`.split('n')

const result = []

for (let i = 0; i < data.length; i += 4) {
  result.push({
    name: data[i],
    address: data[i + 1],
    phone: data[i + 2],
    course: data[i + 3]
  })
}

console.log(result)
    Login or Signup to reply.
  2. 0

    You are using split ('n') two times which does not make sense. After splitting the file into lines you have to count to know when the record is finished.

    let button = document.getElementById('get-text-btn');
      let textArea = document.getElementById('my-text-area');
      
      button.addEventListener('click', function () {
        loader.style.display = 'inline-block';
        fetch('https://v-dresevic.github.io/Advanced-JavaScript-Programming/data/students.txt')
          .then(function (response) {
            if (response.status !== 200) {
              throw Error('Error while reading file.');
            }
            return response.text();
          })
          .then(function (text) {
            // textArea.innerHTML = text;
            const redovi = text.split('n'); 
            
            let records = [];
            for (let i=0; i<redovi.length; i+=4)
            {
              records.push ({
                name: redovi[i].trim(),
                address: redovi[i+1].trim(),
                phone: redovi[i+2].trim(),
                course: redovi[i+3].trim(),
              });
            }
console.log(records)
          })
          .catch(function (err) {
            textArea.innerHTML = 'Fetch problem: ' + err.message;
          })
          .finally(function () {
            loader.style.display = 'none';
          });
      });
    <button id="get-text-btn">Get Data</button>
    <div id="loader"></div>
    <textarea id="my-text-area" rows="30"></textarea>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search