JavaScript JSON conversion from a list

Question

JavaScript JSON conversion from a list

If I have two different lists, such as:

list1= ['blue', 'green', 'purple']
list2 = ['circle', 'square', 'triangle']

Is there a way to convert them into a JSON object structure by using another list to determine attribute names?

For instance, if the attributes are defined as ['color', 'shape']

Then the result should look like:

final_result = [
  {color: 'blue', shape: 'circle'}, 
  {color: 'green', shape: 'square'}, 
  {color: 'purple', shape: 'triangle'}]

javascript json list

Answer 1

Answer №1

Here is a function that I have created which accepts two arguments - the first argument being an array of attributes, and the second argument being an array of arrays representing list items. This function will handle cases where the number of attributes is greater than the number of property items provided:

 var create = function(attrList, propertyLists) {
  var result = [];
  var aLen = attrList.length;
  var pLen = propertyLists.length;
  
  if (pLen === 0) {
    return result;
  }

  var itemLength = propertyLists[0].length;
  if (itemLength === 0) {
    return result;
  }

  var i, j, obj, key;
  for (i = 0; i < itemLength; ++i) {
    obj = {};
    for(j = 0; j < aLen; ++j) {
      key = attrList[j];
      if (typeof propertyLists[j] === 'undefined') {
        //
        continue;
      }
      obj[key] = propertyLists[j][i];
    }
    result.push(obj);
  }

  return result;
 };

var a = ['apple', 'orange', 'banana'];
var b= ['red', 'orange', 'yellow'];
var attrs = ['fruit', 'color'];
var jsonObj = create(attrs, [a, b]);
console.log(jsonObj);

Answer 2

Here is a function that I have created which accepts two arguments - the first argument being an array of attributes, and the second argument being an array of arrays representing list items. This function will handle cases where the number of attributes is greater than the number of property items provided:

 var create = function(attrList, propertyLists) {
  var result = [];
  var aLen = attrList.length;
  var pLen = propertyLists.length;
  
  if (pLen === 0) {
    return result;
  }

  var itemLength = propertyLists[0].length;
  if (itemLength === 0) {
    return result;
  }

  var i, j, obj, key;
  for (i = 0; i < itemLength; ++i) {
    obj = {};
    for(j = 0; j < aLen; ++j) {
      key = attrList[j];
      if (typeof propertyLists[j] === 'undefined') {
        //
        continue;
      }
      obj[key] = propertyLists[j][i];
    }
    result.push(obj);
  }

  return result;
 };

var a = ['apple', 'orange', 'banana'];
var b= ['red', 'orange', 'yellow'];
var attrs = ['fruit', 'color'];
var jsonObj = create(attrs, [a, b]);
console.log(jsonObj);

Answer 3

Answer №2

If you want to achieve this functionality without using underscore or lodash, you can implement it by creating your own methods. Here's how you can do it:

var attributes = ['animal', 'sound'];
var animals = ['dog', 'cat', 'bird'];
var sounds = ['woof', 'meow', 'chirp'];

//Combine arrays into a list of pairs
//(this process would need to be updated with each new array of attribute values)
//MAINTAIN ORDER FOR CORRECT MATCHING
var zipped = zipArrays(animals, sounds);

//Map the zipped list, returning an object based on the keys. 
//Remember the order of arrays in the zip operation 
//must correspond to the order of attributes in the attributes list
var result = mapZipped(zipped, function(item, index) {
    return createObject(attributes, item);
});

console.log(result);

Answer 4

If you want to achieve this functionality without using underscore or lodash, you can implement it by creating your own methods. Here's how you can do it:

var attributes = ['animal', 'sound'];
var animals = ['dog', 'cat', 'bird'];
var sounds = ['woof', 'meow', 'chirp'];

//Combine arrays into a list of pairs
//(this process would need to be updated with each new array of attribute values)
//MAINTAIN ORDER FOR CORRECT MATCHING
var zipped = zipArrays(animals, sounds);

//Map the zipped list, returning an object based on the keys. 
//Remember the order of arrays in the zip operation 
//must correspond to the order of attributes in the attributes list
var result = mapZipped(zipped, function(item, index) {
    return createObject(attributes, item);
});

console.log(result);

Answer 5

Answer №3

It is essential to ensure that the lists are of the same size and all elements correspond correctly for this method to function effectively. If there is a discrepancy in sizes, the process will encounter errors. Can you provide insight into your data structure?

\\given
listA= ['apple', 'orange', 'banana']
listB= ['red', 'orange', 'yellow']
categories = ['fruit', 'color']

\\implement the following script
var output = [];
for (var index = 0; index < listA.length; index++){
    output.push({
        categories[0]:listA[index],
        categories[1]:listB[index]
    });
}

console.log(output);
\\output = [
\\    {fruit: 'apple', color: 'red'}, 
\\    {fruit: 'orange', color: 'orange'}, 
\\    {fruit: 'banana', color: 'yellow'}]

Answer 6

It is essential to ensure that the lists are of the same size and all elements correspond correctly for this method to function effectively. If there is a discrepancy in sizes, the process will encounter errors. Can you provide insight into your data structure?

\\given
listA= ['apple', 'orange', 'banana']
listB= ['red', 'orange', 'yellow']
categories = ['fruit', 'color']

\\implement the following script
var output = [];
for (var index = 0; index < listA.length; index++){
    output.push({
        categories[0]:listA[index],
        categories[1]:listB[index]
    });
}

console.log(output);
\\output = [
\\    {fruit: 'apple', color: 'red'}, 
\\    {fruit: 'orange', color: 'orange'}, 
\\    {fruit: 'banana', color: 'yellow'}]

JavaScript JSON conversion from a list

Answer №1

Answer №2

Answer №3

Similar questions

What is the best practice for adding a DOM element at a precise location within an ng-repeat loop?

Converting Python dictionaries or JSON data into PHP arrays

Following an AJAX post within the MVC framework, the URL becomes excessively lengthy

A helpful guide on displaying validation errors in a form using React JS

issue with implementing the chart.js npm package

Searching JSON objects in a dynamic manner

How can JSON-loaded scripts be executed using jQuery?

"Discover the magic of jQuery: Unveiling the hidden div with one simple CSS visibility change

Methods for dynamically populating dropdown lists with JavaScript and Bootstrap

Implementing Bootstrap tooltips in content that can be scrolled

Unable to display the content

Transformation of JSON data from Array to Object

Javascript - Issue: Route.post() is in need of a callback function, however it received an [object Promise] instead

The tooltip chart is not displaying all of its data

Prevent MUI Autocomplete from closing when the option menu is opened with blur

A guide to mastering Controllers in AngularJS

Address Book on Rails

Tips for adjusting the animation position in Off-Canvas Menu Effects

Discrepancy in functionality between .show() and .append() methods within JQuery

Utilizing a Custom Validator to Compare Two Values in a Dynamic FormArray in Angular 7