React & Axios - Dynamically add key and value to object

Question

Working on a little project of mine and ran into an issue. I am using the "ASOS" API and I need to dynamically add key and value to the parameters that it needs to find the correct product. It is to pick for example color, size, price range etc. Issue is, all things I've tried haven't ended up in a success.

How do I dynamically add key and value to an object?

Something like this:

currency: "USD",
sizeSchema: "US",
lang: "en-US",
newKey: newValue

Here is my code:

const FetchAPI = (props) => {
  const [product, setProducts] = useState([]);
  // Key and Value
  let facetKey = props.facetKey;
  let facetValue = props.facetValue;

// Sets the paramaters
  let params = {
    store: "US",
    offset: props.offset,
    categoryId: props.categoryId,
    limit: props.limit,
    country: "US",
    sort: "freshness",
    currency: "USD",
    sizeSchema: "US",
    lang: "en-US",
  };
  // Need to add my "facetKey" and "facetValue" to "params".

  useEffect(() => {
    const options = {
      method: "GET",
      url: "https://asos2.p.rapidapi.com/products/v2/list",
      params: params,
      headers: {
        "x-rapidapi-key": "",
        "x-rapidapi-host": "",
      },
    };

    axios
      .request(options)
      .then(function (response) {
        setProducts(response.data.products);
        props.items(response.data.itemCount);
        props.facets(response.data.facets);
        console.log(response.data.facets);
      })
      .catch(function (error) {
        console.error(error);
      });
  }, [props.offset, props.limit]);

  return (
    <div>
      <div className={classes.container}>
        {product.map((product) => (
          <ProductCard
            key={product.id}
            img={product.imageUrl}
            name={product.name}
            price={product.price.current.text}
          />
        ))}
      </div>
    </div>
  );
};

Thanks!

Keep in mind The facetKey and facetValue return string values, and if the user havent picked a "facet", or an option to filter the products. Then it returns undefined, can of course change this to null.

junvar · Accepted Answer · 2021-05-20 15:49:07Z

3

You can use the [] operator with objects.

In general:

let obj = {};
let key = 'x';
let value = 3;

obj[key] = value;
console.log(obj);
console.log(obj[key]);

In your example:

let facetKey = props.facetKey;
let facetValue = props.facetValue;

// Sets the paramaters
let params = {
  // ...
};
// Need to add my "facetKey" and "facetValue" to "params".

if (facetKey)
  params[facetKey] = facetValue;

answered May 20, 2021 at 15:49

junvar

11.7k2 gold badges35 silver badges52 bronze badges

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

3 Comments

simon sjöö Over a year ago

Ahh okay, I see. Yea that works! Now it just has to refresh the products, would adding params to the [] in useEffect work or would it be simpler with a page reload?

junvar Over a year ago

I think you're asking how to update params before it's used in useEffect()? If so, your snippet doesn't show facetKey and facetValue being changed, but assuming it's changed in your full code, then yes you can just move the params[k] = v to inside useEffect().

simon sjöö Over a year ago

Ah yes, I see. That works flawlessly! Just need it to be able to filter multiple facey keys and values. I know that I need to use ... so far, but where it shall be I don't know! haha, thanks for the help!

TopW3 · Accepted Answer · 2021-05-20 15:49:22Z

1

You can write the code as follows.

let params = {
    store: "US",
    offset: props.offset,
    categoryId: props.categoryId,
    limit: props.limit,
    country: "US",
    sort: "freshness",
    currency: "USD",
    sizeSchema: "US",
    lang: "en-US",
    [facetKey]: facetValue
};

And if facetKey can be undefined, you can do like this.

let params = {
    store: "US",
    offset: props.offset,
    categoryId: props.categoryId,
    limit: props.limit,
    country: "US",
    sort: "freshness",
    currency: "USD",
    sizeSchema: "US",
    lang: "en-US",
};

facetKey && params = { ...params, [facetKey]: facetValue }
// or
if (facetKey) {
    params = { ...params, [facetKey]: facetValue }
}

answered May 20, 2021 at 15:49

TopW3

1,5371 gold badge10 silver badges14 bronze badges

Collectives™ on Stack Overflow

React & Axios - Dynamically add key and value to object

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related