'Map thru nested JSON in Node ES6 not rendering expected formatting
I am building a photo gallery using a nested JSON file. I want to map through it to create a nicely formatted JavaScript object or at least a smaller JSON file, containing only the text and image.url nodes. My approach has rendered a kind of weird object, not JSON, nor in the format the app wants.
The object that the application wants is like this
export const photos = [
{
src: "https:/app/uploads/medium__2021_gallery_Photo_5_1994_0034_7e3b73d19b.jpg",
width: 4,
height: 4,
title: "Gloria and Emilio together at the 1994 ."
},
{
src: "https:/app/uploads/medium__2021_gallery_Photo_2_1994_0012_b7eebae562.jpg",
width: 4,
height: 3,
title: "Former President and CEO Frances Preston and Adolfo Angel (2nd from left) with guests at the 1994 ."
},
{
src: "https:/app/uploads/medium_arrivals1_220673a90f.jpg",
width: 3,
height: 4,
title: "Lorem ipsum dolor sit amet"
},
{
src: "https:/app/uploads/medium_arrivals2_c5d28f3d2c.jpg",
width: 4,
height: 3,
title: "Lorem ipsum dolor sit amet"
},
{
src: "https:/app/uploads/medium_1_a9ea1a3a7a.jpg",
width: 4,
height: 3,
title: "Lorem ipsum dolor sit amet"
},
{
src: "https:/app/uploads/medium_2_e1cb163862.jpg",
width: 4,
height: 3,
title: "Lorem ipsum dolor sit amet"
}
];
Here is the source file
{
"image_sets": [
{
"name": " 2022",
"description": "<div class=\"en\">Moments from the 2020 </div>\n<div class=\"sp\">Spanish Subhead here about what comes next</div>",
"meta_key": "22_gallery",
"created_by": 1,
"updated_by": 1,
"created_at": "2022-02-27T21:09:24.000Z",
"updated_at": "2022-03-09T20:10:08.000Z",
"slide_show": null,
"image_with_text": [
{
"text": "Gloria and Emilio together at the 1994 .",
"image": {
"name": "_2021_gallery_Photo-5---1994_#0034.jpg",
"alternativeText": "",
"caption": "Lorem ipsum",
"width": 845,
"height": 800,
"formats": {
"thumbnail": {
"name": "thumbnail__2021_gallery_Photo-5---1994_#0034.jpg",
"hash": "thumbnail__2021_gallery_Photo_5_1994_0034_7e3b73d19b",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 165,
"height": 156,
"size": 4.1,
"path": null,
"url": "https://app/uploads/thumbnail__2021_gallery_Photo_5_1994_0034_7e3b73d19b.jpg"
},
"medium": {
"name": "medium__2021_gallery_Photo-5---1994_#0034.jpg",
"hash": "medium__2021_gallery_Photo_5_1994_0034_7e3b73d19b",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 750,
"height": 710,
"size": 37.14,
"path": null,
"url": "https://app/uploads/medium__2021_gallery_Photo_5_1994_0034_7e3b73d19b.jpg"
},
"small": {
"name": "small__2021_gallery_Photo-5---1994_#0034.jpg",
"hash": "small__2021_gallery_Photo_5_1994_0034_7e3b73d19b",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 500,
"height": 473,
"size": 20.97,
"path": null,
"url": "https://app/uploads/small__2021_gallery_Photo_5_1994_0034_7e3b73d19b.jpg"
}
},
"url": "https://app/uploads/_2021_gallery_Photo_5_1994_0034_7e3b73d19b.jpg",
"previewUrl": null,
"provider_metadata": null,
"created_by": 1,
"updated_by": 1,
"created_at": "2021-03-23T22:50:53.000Z",
"updated_at": "2021-03-23T22:50:53.000Z"
}
},
{
"text": "Former President and CEO Frances Preston and Adolfo Angel (2nd from left) with guests at the 1994 .</span>",
"image": {
"name": "_2021_gallery_Photo-2---1994_#0012.jpg",
"alternativeText": "",
"caption": "Lorem ipsum",
"width": 1150,
"height": 800,
"formats": {
"thumbnail": {
"name": "thumbnail__2021_gallery_Photo-2---1994_#0012.jpg",
"hash": "thumbnail__2021_gallery_Photo_2_1994_0012_b7eebae562",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 224,
"height": 156,
"size": 9.34,
"path": null,
"url": "https://app/uploads/thumbnail__2021_gallery_Photo_2_1994_0012_b7eebae562.jpg"
},
"large": {
"name": "large__2021_gallery_Photo-2---1994_#0012.jpg",
"hash": "large__2021_gallery_Photo_2_1994_0012_b7eebae562",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 1000,
"height": 696,
"size": 95.48,
"path": null,
"url": "https://app/uploads/large__2021_gallery_Photo_2_1994_0012_b7eebae562.jpg"
},
"medium": {
"name": "medium__2021_gallery_Photo-2---1994_#0012.jpg",
"hash": "medium__2021_gallery_Photo_2_1994_0012_b7eebae562",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 750,
"height": 522,
"size": 63.83,
"path": null,
"url": "https://app/uploads/medium__2021_gallery_Photo_2_1994_0012_b7eebae562.jpg"
},
"small": {
"name": "small__2021_gallery_Photo-2---1994_#0012.jpg",
"hash": "small__2021_gallery_Photo_2_1994_0012_b7eebae562",
"ext": ".jpg",
"mime": "image/jpeg",
"width": 500,
"height": 348,
"size": 33.53,
"path": null,
"url": "https://app/uploads/small__2021_gallery_Photo_2_1994_0012_b7eebae562.jpg"
}
},
"url": "https://app/uploads/_2021_gallery_Photo_2_1994_0012_b7eebae562.jpg",
"previewUrl": null,
"provider_metadata": null,
"created_by": 1,
"updated_by": 1,
"created_at": "2021-03-23T22:48:50.000Z",
"updated_at": "2021-03-26T18:24:50.000Z"
}
}
]
}
]
}
Here is my code
const fs = require('fs')
// IMPORT DATA SET
const source = require('./source.json')
// GRAB ONLY DATA I WANT
const data = source.image_sets[0].image_with_text;
console.log('data is: ' + typeof(data)) // object
// LOOP THROUGH ARRAY
const mydata = data.map((item) => (
`title: ${item.text}, src: ${item.image.url}, width: ${item.image.width}, height: ${item.image.height}`
))
console.log('mydata is: ' + typeof(mydata)) // object
// FORMAT JSON OR OBJ NOTATION
const mystring = JSON.stringify(mydata, null, 4)
console.log('mystring is: ' + typeof(mystring)) // string
// WRITE TO FILE
fs.writeFile('./user.js', mystring, 'utf-8', (err) => {
if (err) {
console.error(err)
} else {
console.log(mystring)
}
})
It is profoundly disappointing that it is neither well formatted JSON or a JavaScript object that I can use. The stringify is not prettifying. Nor are the template literals forming multilines.
This is what I am getting
data is: object
mydata is: object
mystring is: string
[
"title: Emilio together at the 1994 ., src: https://app/uploads/_2021_gallery_Photo_5_1994_0034_7e3b73d19b.jpg, width: 845, height: 800",
"title: Former President and eston and Adold from left) with guests at the 1994 .</span>, src: https://app/uploads/_2021_gallery_Photo_2_1994_0012_b7eebae562.jpg, width: 1150, height: 800"
]
Close, but no cigar. I have researched but without success. Thanks if you have the answer.
Solution 1:[1]
You'll want to map the items to an object instead of a string:
const mydata = source.image_sets[0].image_with_text.map((item) => ({
title: item.text,
src: item.image.url,
width: item.image.width,
height: item.image.height
}));
// FORMAT JSON OR OBJ NOTATION
const mystring = JSON.stringify(mydata, null, 4)
// WRITE TO FILE
fs.writeFileSync('./user.js', `export const photos = ${mystring};`, 'utf-8');
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Kyle |