Divide a string within a JSON object and output it as an array

Question

Divide a string within a JSON object and output it as an array

I've encountered a challenge while working with data received from an API. My goal is to loop through this information and generate HTML elements based on it. The issue lies in the 'subjects' data, which arrives as a string but needs to be manipulated as an array for my purposes.

Here's a glimpse of the sample JSON structure:

{
    "employees": [
        {
            "id": 7099,
            "subjects": "English,Biology",
        },
        ...
    ]
}

Below is a simplified version of the Vue component code I'm currently working with:

<template>
  ...
</template>

<script>
...
</script>

In a previous scenario, I resolved a similar issue by creating a function to split the strings within 'employee.subjects'. However, this approach won't suffice here since I need to filter the data based on subjects before integrating it into the HTML.

My understanding is that I need to iterate over the JSON, extract the 'subjects', split them, save them into a new array, and then replace the original 'this.employees' with this modified array.

The farthest I've reached so far is shown below:

this.employees.forEach((employee) => {}

I'm feeling stuck on how to proceed. While the task appears straightforward, none of my attempts seem to yield results. Any suggestions or insights would be greatly appreciated.

javascript json vue.js

Answer 1

Answer №1

the key change needed is:

this.employees = response.employees.map((e) => ({
  ...e,
  subjects: e.subjects.split(","),
}))

thus, the revised code will be:

<template>
  <p v-for="employee in employees" :key="employee.id">
    <div v-for="subject in employee.subjects" :key="subject">
      {{ subject }}
    </div>
  </p>
</template>

<script>
export default {
  data() {
    return {
      employees: [],
    };
  },
  mounted() {
    fetch("http://localhost:3000/employees")
      .then((response) => response.json()).catch(() => mydata)
      .then(
        (response) =>
          (this.employees = response.employees.map((e) => ({
            ...e,
            subjects: e.subjects.split(","),
          }))),
      );
  },
};

const mydata = {
  employees: [
    {
      id: 7099,
      subjects: "English,Biology",
    },
    {
      id: 7100,
      subjects: "English,French",
    },
    {
      id: 7101,
      subjects: "Maths,Science",
    },
    {
      id: 7102,
      subjects: "English,Chemistry",
    },
    {
      id: 7103,
      subjects: "English,Biology,Chemistry",
    },
  ],
};
</script>

see a live demo here:

Answer 2

the key change needed is:

this.employees = response.employees.map((e) => ({
  ...e,
  subjects: e.subjects.split(","),
}))

thus, the revised code will be:

<template>
  <p v-for="employee in employees" :key="employee.id">
    <div v-for="subject in employee.subjects" :key="subject">
      {{ subject }}
    </div>
  </p>
</template>

<script>
export default {
  data() {
    return {
      employees: [],
    };
  },
  mounted() {
    fetch("http://localhost:3000/employees")
      .then((response) => response.json()).catch(() => mydata)
      .then(
        (response) =>
          (this.employees = response.employees.map((e) => ({
            ...e,
            subjects: e.subjects.split(","),
          }))),
      );
  },
};

const mydata = {
  employees: [
    {
      id: 7099,
      subjects: "English,Biology",
    },
    {
      id: 7100,
      subjects: "English,French",
    },
    {
      id: 7101,
      subjects: "Maths,Science",
    },
    {
      id: 7102,
      subjects: "English,Chemistry",
    },
    {
      id: 7103,
      subjects: "English,Biology,Chemistry",
    },
  ],
};
</script>

see a live demo here:

Answer 3

Answer №2

If my comprehension is accurate, the variable response contains the structure you've presented and your objective is to convert those strings into arrays when assigning them to this.employees. Is this what you have in mind?

.then(response => this.employees = {
  employees: response.employees.map(employee => ({
    ...employee,
    subjects: employee.subjects.split(',')
  }))
})

Here's a sample scenario:

const response = {
    "employees": [
        {
            "id": 7099,
            "subjects": "English,Biology",
        },
        {
            "id": 7100,
            "subjects": "English,French",
        },
        {
            "id": 7101,
            "subjects": "Maths,Science",
        },
        {
            "id": 7102,
            "subjects": "English,Chemistry",
        },
        {
            "id": 7103,
            "subjects": "English,Biology,Chemistry",
        }
    ]
};

const employees = {
  employees: response.employees.map(employee => ({
    ...employee,
    subjects: employee.subjects.split(',')
  }))
};

console.log(employees);

Answer 4

If my comprehension is accurate, the variable response contains the structure you've presented and your objective is to convert those strings into arrays when assigning them to this.employees. Is this what you have in mind?

.then(response => this.employees = {
  employees: response.employees.map(employee => ({
    ...employee,
    subjects: employee.subjects.split(',')
  }))
})

Here's a sample scenario:

const response = {
    "employees": [
        {
            "id": 7099,
            "subjects": "English,Biology",
        },
        {
            "id": 7100,
            "subjects": "English,French",
        },
        {
            "id": 7101,
            "subjects": "Maths,Science",
        },
        {
            "id": 7102,
            "subjects": "English,Chemistry",
        },
        {
            "id": 7103,
            "subjects": "English,Biology,Chemistry",
        }
    ]
};

const employees = {
  employees: response.employees.map(employee => ({
    ...employee,
    subjects: employee.subjects.split(',')
  }))
};

console.log(employees);

Answer 5

Answer №3

It appears that you are attempting to convert the subjects into a list and template them. To achieve this, you can map the subjects and split them using the "," character to create an array. Subsequently, you can utilize a forEach loop with the template to exhibit them as HTML. It's worth noting that setting innerHTML in production may not be ideal, unless you are utilizing handlebars or a similar tool.

In addition, I have eliminated duplicates by employing a set to ensure deduplication if needed. The removal process involves:

Array.from(new Set(<Keep this section>))

const sampleData = {
    "employees": [
        {
            "id": 7099,
            "subjects": "English,Biology",
        },
        {
            "id": 7100,
            "subjects": "English,French",
        },
        {
            "id": 7101,
            "subjects": "Maths,Science",
        },
        {
            "id": 7102,
            "subjects": "English,Chemistry",
        },
        {
            "id": 7103,
            "subjects": "English,Biology,Chemistry",
        }
    ]
  }
const template = `<div  v-for="employee in employees" :key="employee.id">
    <div v-for="subject in employee.subjects" :key="subject"> 
      {{ subject }} 
    </div>
  </div>`
  
function afterMount() {
    return fetch('http://localhost:3000/employees')
      .then(response => response.json())
      .catch(()=>{return sampleData})
}
const start = async () => {
  const subjects = await afterMount()
  const subjectsAsArray = Array.from(new Set(subjects
    .employees
    .map(({subjects})=>subjects.split(","))
    .flat()
    ));
    
  const updatedArray = subjectsAsArray
    .map((subject)=>{
    const templatedHtml = template.replace("{{ subject }}",subject)
    document.body.innerHTML += templatedHtml
  })
  
  
  
}
start()

Answer 6

It appears that you are attempting to convert the subjects into a list and template them. To achieve this, you can map the subjects and split them using the "," character to create an array. Subsequently, you can utilize a forEach loop with the template to exhibit them as HTML. It's worth noting that setting innerHTML in production may not be ideal, unless you are utilizing handlebars or a similar tool.

In addition, I have eliminated duplicates by employing a set to ensure deduplication if needed. The removal process involves:

Array.from(new Set(<Keep this section>))

const sampleData = {
    "employees": [
        {
            "id": 7099,
            "subjects": "English,Biology",
        },
        {
            "id": 7100,
            "subjects": "English,French",
        },
        {
            "id": 7101,
            "subjects": "Maths,Science",
        },
        {
            "id": 7102,
            "subjects": "English,Chemistry",
        },
        {
            "id": 7103,
            "subjects": "English,Biology,Chemistry",
        }
    ]
  }
const template = `<div  v-for="employee in employees" :key="employee.id">
    <div v-for="subject in employee.subjects" :key="subject"> 
      {{ subject }} 
    </div>
  </div>`
  
function afterMount() {
    return fetch('http://localhost:3000/employees')
      .then(response => response.json())
      .catch(()=>{return sampleData})
}
const start = async () => {
  const subjects = await afterMount()
  const subjectsAsArray = Array.from(new Set(subjects
    .employees
    .map(({subjects})=>subjects.split(","))
    .flat()
    ));
    
  const updatedArray = subjectsAsArray
    .map((subject)=>{
    const templatedHtml = template.replace("{{ subject }}",subject)
    document.body.innerHTML += templatedHtml
  })
  
  
  
}
start()

Divide a string within a JSON object and output it as an array

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to apply color to a line-through click event in React without affecting the font color?

Retrieve a specific value from an array of objects by searching for a particular object's value

Is it possible for numerous identical components to trigger the display of the identical modal on a single webpage?

Accessing JSON data model from Ember route or controller

What causes differences in the resulting width between buttons and inputs as opposed to divs and anchor tags?

Redis appears to be missing the expected results

Send both file and model data using AngularJS with FormData

Push the accordion tab upwards towards the top of the browser

What could be causing the React variable to malfunction within my state object?

Manipulating DOM elements using JavaScript Vanilla with the Jquery <<S.fn.init [selector]>> framework

Is it possible to keep my JavaScript scripts running continuously within my HTML code?

Ways to determine if a website is being accessed from a mobile device or a computer without relying on TeraWurfl technology

Utilize Material-UI slider components to dynamically manage slider handles

Using a render target causes certain elements of my visual graphics to become hidden

Problem with RadioButton click event not triggering

Using Json.NET to Append JObject to existing JArray

How can you execute PHP code within another PHP script without triggering a redirect?

Having trouble getting Material-UI classes to work with external SVG icons?

What is the Vue3 counterpart to the concept of a 'template'?

Learn how to implement interconnected dropdown menus on an html webpage using a combination of JavaScript, AngularJs, and JSON dataset