By Kelvin


2020-08-01 13:14:10 8 Comments

I have no idea how to make this,

I have a loop for product List Item, but i really don't know how to link the shop item to shop name. I have tried many method but i really don't know how to link the item to the shop.
if productList.ShopId = shopList.id then use this shopList.title
SHOP NAME = shopList.title

const getProductList = function (productItem) {
    const productListRender = 
    $('<div>').append($('<span>', {
        html: shopName() <<<< SHOP NAME
    }));

    $.each(data.shopList), function shopName() {
        this.text(shopList.title);
    };
        
    return productListRender;
}
const $product = $('#List')
$.each(data.productList, function (index, data) {
    $product.append(getProductList(data));
});

Data JS is Below:

var data = {
    productList: [
        {
            id: "62276197-6059-4c21-9b40-c5b1d277e85d",
            link: "javascript:void(0)",
            imgurl: "/img/upload/png/joyacart_000001_12032019.png",
            text: 'Product 001',
            goldMedal: false,
            newItem: true,
            newShop: true,
            freeDelivery: true,
            ShopId: '5cfb048c-86e8-4d2d-85bf-e4e9e1effdcb'
        },
        {
            id: "59de8216-052d-4e51-9f7d-7e96642ded62",
            link: "javascript:void(0)",
            imgurl: "/img/upload/png/joyacart_000002_12032019.png",
            text: 'Product 002',
            goldMedal: true,
            newItem: false,
            newShop: true,
            freeDelivery: true,
            ShopId: '10eb4250-47d6-41ad-a429-f65e05836f26'
        },
        {
            id: "59de8216-052d-4e51-9f7d-7e96642ded62",
            link: "javascript:void(0)",
            imgurl: "/img/upload/png/joyacart_000003_12032019.png",
            text: 'Product 003',
            goldMedal: true,
            newItem: false,
            newShop: true,
            freeDelivery: true,
            ShopId: '10eb4250-47d6-41ad-a429-f65e05836f26'
        }],

    shopList: [{
        id: '5cfb048c-86e8-4d2d-85bf-e4e9e1effdcb',
        title: 'Shop 001'
    },
    {
        id: '10eb4250-47d6-41ad-a429-f65e05836f26',
        title: 'Test Shop'
    }]
}

2 comments

@Adam Azad 2020-08-01 13:25:40

Refine shopName as:

function shopName(shopId) {
  // find the right shop by comparing shopId with each `shop.id`
  // uses optional chaining to prevent errors
  // returns undefineds if no match is found
  return shopList.filter(shop => shop.id === shopId)?.[0]?.title;
}

const shopList = [{
    id: '5cfb048c-86e8-4d2d-85bf-e4e9e1effdcb',
    title: 'Shop 001'
  },
  {
    id: '10eb4250-47d6-41ad-a429-f65e05836f26',
    title: 'Test Shop'
  }]

console.log(shopName('10eb4250-47d6-41ad-a429-f65e05836f26'));
console.log(shopName('222'));

@Kelvin 2020-08-01 13:32:32

It work!!! YAY thank you so much so much.....

@Adam Azad 2020-08-01 13:33:12

@Kelvin, please upvote and accept the answer :)

@Kelvin 2020-08-01 13:35:21

i have accept and up vote :)

@rvirayii 2020-08-01 13:22:21

everything seems to be in order in your data. only thing that i can see is that there was some mishap in your comparison method. have you tried comparing them not with equal sign but rather treat them as string .

you could see this link for reference..

https://www.tutorialspoint.com/What-is-the-best-way-to-compare-two-strings-in-JavaScript

Related Questions

Sponsored Content

97 Answered Questions

[SOLVED] How can I remove a specific item from an array?

  • 2011-04-23 22:17:18
  • Walker
  • 6974266 View
  • 8528 Score
  • 97 Answer
  • Tags:   javascript arrays

57 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

43 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

66 Answered Questions

[SOLVED] How do I check whether a checkbox is checked in jQuery?

39 Answered Questions

[SOLVED] How do I return the response from an asynchronous call?

61 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

28 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

86 Answered Questions

[SOLVED] How do JavaScript closures work?

58 Answered Questions

[SOLVED] How do I redirect to another webpage?

3 Answered Questions

Sponsored Content