How to set data object from response array data

Question

i have response data like this

{
  "data": {
    "title": "dashboard",
    "description": "just test dashboard",
    "photos": [
      {
        "file_name": "12345454.jpg",
        "photo_name": "indonesia"
      },
      {
        "file_name": "567686.jpg",
        "photo_name": "jakarta"
      }]
  }
}

then i need change response of data with file_name of array without photos variable.

expected: file_name[0] will be sign from file_name index of array

like this

{
  "data": {
    "title": "dashboard",
    "description": "just test dashboard",
    "file_name[0]": "12345454.jpg",
    "file_name[1]": "567686.jpg"
  }
}

i have try with map of photos but didn't work

this.data = this.data.photos.map((item, idx) => {
    let data = {
      file_name: item.file_name
    }
    return data
  })
  this.data.photos.map((item, idx) => {
    this.$set(this.data, 'file_name', item.file_name)
  })

Nikhil Aggarwal · Accepted Answer · 2018-11-08 10:41:30Z

3

Try following

let data = {"title": "dashboard","description": "just test dashboard","photos":[{"file_name": "12345454.jpg","photo_name": "indonesia"},{"file_name": "567686.jpg","photo_name": "jakarta"}]};

data.photos.forEach((v,i) => data[`file_name[${i}]`] = v.file_name);
delete data.photos;
console.log(data);

answered Nov 8, 2018 at 10:41

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Orelsanpls · Accepted Answer · 2018-11-08 10:44:15Z

I propose a soluce creating a new object.

@Nikhil Aggarwal soluce mutate the existing object

Both are good, pick your poison :)

const old = {
  data: {
    title: 'dashboard',
    description: 'just test dashboard',
    photos: [
      {
        file_name: '12345454.jpg',
        photo_name: 'indonesia',
      },
      {
        file_name: '567686.jpg',
        photo_name: 'jakarta',
      }],
  },
};

const formatted = {
  // We use reduce to create the data object
  data: Object.keys(old.data).reduce((tmp, x) => {
    // If we are not dealing with photos key, just add the old data to the new object
    if (x !== 'photos') {
      tmp[x] = old.data[x];
      
      return tmp;
    }
    
    // for each photo, add a new key
    old.data.photos.forEach((y, yi) => {
      tmp[`file_name[${yi}]`] = y.file_name;
    });
    
    return tmp;
  }, {}),
};

console.log(formatted);

Matt Way · Accepted Answer · 2018-11-08 10:46:47Z

0

If I understand correctly, you actually want file_name to be an array. If so, and you are happy to alter the object in place, try:

const obj = {
  data: {
    title: 'dashboard',
    description: 'just test dashboard',
    photos: [
      {
        file_name: '12345454.jpg',
        photo_name: 'indonesia'
      },
      {
        file_name: '567686.jpg',
        photo_name: 'jakarta'
      }]
  },
}

obj.data.file_name = obj.data.photos.map(i => i.file_name)
delete obj.data.photos

console.log(obj)

answered Nov 8, 2018 at 10:46

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

2 Comments

dede.brahma Over a year ago

@matt_way thanks, but file_name i not an array but string

Matt Way Over a year ago

Can you elaborate on why you need it to be like this? It feels like there might be a much better underlying solution.

Khurram Shaikh · Accepted Answer · 2018-11-08 10:49:58Z

0

have a look at this example. by using this you can restructure or create new you json.

<span id="text"></span><br/>
<span id="photosdata"></span>

here is the logic

var obj = JSON.parse('{   "data": {     "title": "dashboard",     "description": "just test dashboard",     "photos": [       {         "file_name": "12345454.jpg",         "photo_name": "indonesia"       },       {         "file_name": "567686.jpg",         "photo_name": "jakarta"       }]   } }');

document.getElementById("text").innerHTML = obj.data.title+"<br/>";

var photos = obj.data.photos;

photos.forEach(function(item){
 document.getElementById("text").innerHTML += item.file_name +"<br/>";
});

https://jsfiddle.net/qufnwmd4/1/

answered Nov 8, 2018 at 10:49

Khurram Shaikh

3003 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to set data object from response array data

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related