Create a collection of data by retrieving values from a web service response

Question

Create a collection of data by retrieving values from a web service response

My goal is to populate table values from a webservice response. The issue arises when the response format is not compatible with the table. The response structure may vary.

0:{name: "image.png", base64: "iVBORw"}
1:{name: "download.png", base64: "iVBO"}
2:{name: "test-animation.gif", base64: "R0lGODlhLAEs"}

How can I transform it to the desired format?

[["image.png", "iVBORw"],["download.png", "iVBO"],["test-animation.gif", "R0lGODlhLAEs"]]

This is my approach:

$.cordys.ajax({
method: "somewebservice",
namespace: "Package",
parameters: {
emailid:mailidvalue
},
dataType: '* json',
 success: function (result) { 
 output=result;
 bodycontent=output["data"]["body"];
 var attachvalue=result.data.tuple;

 $('#attachmenttable').DataTable( {
        "data": attachvalue,
        columns: [
            { title: "File Name" },
            { title: "Base64" }
        ]
    } );
                       },
error: function(err){
console.log(err);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

javascript ajax

Answer 1

Answer №1

There is a direct correlation between the given data and the desired outcome. To achieve this, you can utilize either Array.prototype.map() or $.map.

var given = {
  0: {
    name: "image.png",
    base64: "iVBORw"
  },
  1: {
    name: "download.png",
    base64: "iVBO"
  },
  2: {
    name: "test-animation.gif",
    base64: "R0lGODlhLAEs"
  }
};

var desired = Object.keys(given).map(function(key) {
  return [ given[key].name, given[key].base64 ];
});

console.log(desired);

var given = {
  0: {
    name: "image.png",
    base64: "iVBORw"
  },
  1: {
    name: "download.png",
    base64: "iVBO"
  },
  2: {
    name: "test-animation.gif",
    base64: "R0lGODlhLAEs"
  }
};

var desired = $.map(given, function (value, key) {
  return [[ given[key].name, given[key].base64 ]];
});

console.log(desired);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

There is a direct correlation between the given data and the desired outcome. To achieve this, you can utilize either Array.prototype.map() or $.map.

var given = {
  0: {
    name: "image.png",
    base64: "iVBORw"
  },
  1: {
    name: "download.png",
    base64: "iVBO"
  },
  2: {
    name: "test-animation.gif",
    base64: "R0lGODlhLAEs"
  }
};

var desired = Object.keys(given).map(function(key) {
  return [ given[key].name, given[key].base64 ];
});

console.log(desired);

var given = {
  0: {
    name: "image.png",
    base64: "iVBORw"
  },
  1: {
    name: "download.png",
    base64: "iVBO"
  },
  2: {
    name: "test-animation.gif",
    base64: "R0lGODlhLAEs"
  }
};

var desired = $.map(given, function (value, key) {
  return [[ given[key].name, given[key].base64 ]];
});

console.log(desired);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Create a collection of data by retrieving values from a web service response

Answer №1

Similar questions

Add the teams-js library to your Vue.js project

Displaying an HTML string on a webpage

A simple guide to positioning an image between two lines of text with Material UI

Having trouble getting your Bootstrap v4 carousel to function properly?

JavaScript code that is condensed for efficiency without sacrificing readability and maintainability

Display a loading screen in ExpressJS until the data is fully loaded and ready for use

Use Node and Express with JavaScript to store HTML form data in JSON format within a .json file

Transferring information between container and component with Meteor React

How can one properly iterate through an HTML Collection in JavaScript?

Hiding a pop-up element and updating the state to False when clicking anywhere outside the element in the background

Alter data in MongoDB based on specific circumstances

Insert metadata tag into the head element of the parent iframe

Can Ember store in Route handle Post requests?

"Unlock the power of Passport.js: A guide to leveraging async rendering for email templates

The cursor seems to be playing a game of hopscotch every time I

The issue arises when trying to use destructured imports with Mongoose

Typeahead AJAX in Bootstrap 3

Securing attributes in Rails 4 models: Best practices and strategies

What is the best way to add data-content to hr:after using JavaScript?

Create dynamic transitions for hidden elements using a special technique