React NativeのSectionListのデータを正しい形式にするにはどうすればよいですか？

Question

私はのような配列を持っています。

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', 
    } 
]; 

それが反応ネイティブの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', 
    }, 
]; 

私は、各日付keyためdataを深押しする方法を考え出す苦労しています。

実際にallPostsにはimageUrl以上がありますが、わかりやすくするために余分なデータは削除しました。

Answer 1

をお試しくださいあなたのデータ構造を変更するときはいつも確かに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; 
}, []); 

Answer 2

これはあなたが望むものですか？

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);

Answer 3

私はそれはあなたがそれらを必要とするので、map、filterとreduceを使用する方法を学習するための時間だと思います。この

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)