Instantiate a new JavaScript object from an existing JSON file

Question

I'm trying to create a series of objects from a JSON object. My current code looks (something) like the below.

class Card {
    constructor(mig, sku, title, price, img, link, promo) {
        this.mig = mig;
        this.sku = sku;
        this.title = title;
        this.price = price;
        this.img = img;
        this.link = link;
        this.promo = promo;
    }

    populateHTML {
        return `
            <div class="card">
                <div class="card--title">
                    <h2>${this.title}</h2>
                </div>
                <img src="${this.img}" alt="${this.title}" class="card--img" />
                <a href="${this.link}" target="_blank" class="card--link"><button>Click</button></a>
            </div>
        `;
    }
}

const item1 = new Card('MIG5', 'A577', 'item1', '£2.90','/img/S/GRP/IC/AIG5278523.jpg', '/en/test/item1');
const item2 = new Card('MIG3', 'A32', 'item2', '£23.00', '/img/S/GRP/IC/AIG3622835.jpg', '/en/test/item2');

My issue is that when I instantiate a new instance of the class, I have to write out all those parameters within the variable and actually it would be a lot easier to store all of that data within a JSON file or something like that, i.e

{
    {
        'mig' : 'MIG5',
        'sku' : 'A577',
        'title' : 'item1',
        'price' : '£2.90',
        'img' : '/img/S/GRP/IC/AIG5278523.jpg',
        'link' : '/en/test/item1'
    },
    {
        'mig' : 'MIG3',
        'sku' : 'A382',
        'title' : 'item2',
        'price' : '£23.00',
        'img' : '/img/S/GRP/IC/AIG3622835.jpg',
        'link' : '/en/test/item2'}
    }
}

Is there a way that something like this can be possible rather than having to manually write out the parameters?

I appreciate all the help you're willing to give!

Thanks

thedude · Accepted Answer · 2019-12-10 13:53:34Z

2

You can use a destructuring assignment in your constructor like so:

constructor({mig, sku, title, price, img, link, promo}) {
    this.mig = mig;
    this.sku = sku;
    this.title = title;
    this.price = price;
    this.img = img;
    this.link = link;
    this.promo = promo;
}

and pass an object to your constructor like so:

new Card({
    'mig' : 'MIG5',
    'sku' : 'A577',
    'title' : 'item1',
    'price' : '£2.90',
    'img' : '/img/S/GRP/IC/AIG5278523.jpg',
    'link' : '/en/test/item1'
 })

or if you have already a json object just pass it as is:

new Card(cardData)

edited Dec 10, 2019 at 13:53

answered Dec 10, 2019 at 10:54

thedude

9,8371 gold badge34 silver badges33 bronze badges

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

1 Comment

Thomas Hewitt Over a year ago

Thanks for this. I used this in the end and then to get it to work with out CMS used babeljs.io to revert it to es2015. Worked perfectly and I learned something new which I know I'll use again. Thank you.

BornaS · Accepted Answer · 2019-12-10 10:59:23Z

0

You can iterate over the JSON data, and connect the value for each key in the object together to create the list of parameters you'd like to use. It would look something like this:

[
  {
    'mig' : 'MIG5',
    'sku' : 'A577',
    'title' : 'item1',
    'price' : '£2.90',
    'img' : '/img/S/GRP/IC/AIG5278523.jpg',
    'link' : '/en/test/item1'
  },
  {
    'mig' : 'MIG3',
    'sku' : 'A382',
    'title' : 'item2',
    'price' : '£23.00',
    'img' : '/img/S/GRP/IC/AIG3622835.jpg',
    'link' : '/en/test/item2'}

 ].forEach((json, index) => {
   console.log(Object.values(json).join())
 });

answered Dec 10, 2019 at 10:59

BornaS

874 bronze badges

Comments

Corentin Bernard · Accepted Answer · 2019-12-10 11:00:18Z

0

Your JSON format is not valid, it should look like this:

[
 {
        "mig" : "MIG5",
        "sku" : "A577",
        "title" : "item1",
        "price" : "£2.90",
        "img" : "/img/S/GRP/IC/AIG5278523.jpg",
        "link" : "/en/test/item1"
    },
    {
        "mig" : "MIG3",
        "sku" : "A382",
        "title" : "item2",
        "price" : "£23.00",
        "img" : "/img/S/GRP/IC/AIG3622835.jpg",
        "link" : "/en/test/item2"
    }
]

If you are using node you can use fs to read a JSON file:

const fs = require('fs');
let JSONfile = fs.readFileSync('./test.json');

let cards = JSON.parse(JSONfile);

Then you can use a destructuring assignment in your constructor:

class Card {
    constructor({mig, sku, title, price, img, link, promo}) {
        this.mig = mig;
        this.sku = sku;
        this.title = title;
        this.price = price;
        this.img = img;
        this.link = link;
        this.promo = promo;
    }

    populateHTML () {
        return `
            <div class="card">
                <div class="card--title">
                    <h2>${this.title}</h2>
                </div>
                <img src="${this.img}" alt="${this.title}" class="card--img" />
                <a href="${this.link}" target="_blank" class="card--link"><button>Click</button></a>
            </div>
        `;
    }
}

Edit: Finally to create your cards:

for (let i =0; i < cards.length; i++) {
    let newCard = new Card(cars[i]);
    newCard.populateHTML();
}

answered Dec 10, 2019 at 11:00

Corentin Bernard

457 bronze badges

2 Comments

Thomas Hewitt Over a year ago

Thanks for this. Unfortunately Node isn't available to us. We're limited by a very restrictive CMS. Also thanks for the tip on formatting JSON.

Corentin Bernard Over a year ago

If you still have a way to read a file using your CMS, even as a string, you can still use JSON.parse() to transform the string into a javascript object/array

Collectives™ on Stack Overflow

Instantiate a new JavaScript object from an existing JSON file

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related