CODEWITHSUNDEEP
javascriptarraysreact-nativejavascript-objects
GollyJer
GollyJer

Reputation: 26662

How do I get my data into the correct format for React Native's SectionList?

I have an allPosts array that looks like this.

const allPosts = [
    {
      date: '2017-06-06',
      imageUrl: 'image1_06-06',
    },
    {
      date: '2017-06-06',
      imageUrl: 'image2_06-06',
    },
    {
      date: '2017-06-07',
      imageUrl: 'image1_06-07',
    },
    {
      date: '2017-06-07',
      imageUrl: 'image2_06-07',
    }
];

It needs to organized like this for React Native's SectionList.

const postsByDate = [
    {
      data: [{ imageUrl: 'image1_06-06' }, { imageUrl: 'image2_06-06' }],
      key: '2017-06-06',
    },
    {
      data: [{ imageUrl: 'image1_06-07' }, { imageUrl: 'image2_06-07' }],
      key: '2017-06-07',
    },
];

I'm having a hard time figuring how to deep-push the data for each dated key.

If it matters allPosts actually has more than imageUrl but I removed the extra data for simplicity.

Upvotes: 3

Views: 1147

Answers (3)

Henrik R
Henrik R

Reputation: 4972

I think it is time for you to learn how to use map, filter and reduce since you will need them all the time when changing your data structure. Here is very clean solution done with reduce:

const postsByDate = allPosts.reduce((acc, post) => {
  const foundIndex = acc.findIndex(element => element.key === post.date);
  if (foundIndex === -1) {
    return [
      ...acc, 
      {
        key: post.date,
        data: [{imageUrl: post.imageUrl}],
      },
    ];
  }
  acc[foundIndex].data = [...acc[foundIndex].data, {imageUrl: post.imageUrl}];
  return acc;
}, []);

Upvotes: 7

Dinesh undefined
Dinesh undefined

Reputation: 5546

is this you wanted?

const allPosts = [
    {
      date: '2017-06-06',
      imageUrl: 'image1_06-06',
    },
    {
      date: '2017-06-06',
      imageUrl: 'image2_06-06',
    },
    {
      date: '2017-06-07',
      imageUrl: 'image1_06-07',
    },
    {
      date: '2017-06-07',
      imageUrl: 'image2_06-07',
    }
];
var keys = [];
var PostsByDate = [];
for (var i in allPosts){
    var date = allPosts[i].date;
    var temp_img = [];
    for(var j in allPosts){
        if(allPosts[j].date == date){
          temp_img.push({imageUrl:allPosts[j].imageUrl});
        }
     }
     var obj = {data:temp_img,key:date};
     PostsByDate.push(obj);
} 
console.log(PostsByDate);

Upvotes: 1

Priyesh Kumar
Priyesh Kumar

Reputation: 2857

Try this

const allPosts = [
    {
        date: '2017-06-06',
        imageUrl: 'image1_06-06',
    },
    {
        date: '2017-06-06',
        imageUrl: 'image2_06-06',
    },
    {
        date: '2017-06-07',
        imageUrl: 'image1_06-07',
    },
    {
        date: '2017-06-07',
        imageUrl: 'image2_06-07',
    }
];


var o = {}
allPosts.map(item => {
    o[item.date] = o[item.date] || { key: item.date }
    if (o[item.date].data) {
        o[item.date].data.push({ imageUrl: item.imageUrl })
    } else {
        o[item.date].data = [{ imageUrl: item.imageUrl }]
    }
})

var PostByDate = Object.keys(o).map(val => {
    return o[val]
})

console.log(PostByDate)

Upvotes: 1

Related Questions