How do I map a variable to object

Question

I'm new to JSON and jQuery/JavaScript.

How would I pull in a object so that I can use it within jQuery, I've tried 2 attempts

var placements = document.querySelector(placements)
var message = document.querySelector(placements.message)


$.ajax({
  type: 'GET',
  url: 'https://raw.githubusercontent.com/kieranbs96/developer-exercise/master/data/recommendations.json',
  async: false,
  dataType: 'json',
  success: function (data) {
    $("header").append(placements.message);
  }
});

Below is the JSON I'm trying to pull in:

{  
   "placements":[  
      {  
         "message":"If you like this, you might be into these",
         "items":[  
            {  
               "id":"029148",
               "name":"Woodblock Play Suit",
               "price":"46.00"
            },
            {  
               "id":"0294526806",
               "name":"Smock Dress",
               "price":"39.00"
            },
            {  
               "id":"0297180006",
               "name":"Cami",
               "price":"9.00"
            },
            {  
               "id":"0298473606",
               "name":"Asymmetric Wrap Cami Dress",
               "price":"46.00"
            },
            {  
               "id":"0297155306",
               "name":"Casual Stripe Tee",
               "price":"16.00"
            }
         ]
      }
   ]
}

Marked as duplicate - the other question did not solve my problem - it has been solved by an answer to this question.

You want to append the data to the DOM, I suppose. What should the result look like? — PeterMader, Jun 26 '17 at 15:15
this would probably help you out https://stackoverflow.com/questions/22655008/how-to-get-json-field-names — Svet Angelov, Jun 26 '17 at 15:17
That first line looks like a potential bug/issue: `var placements = document.querySelector(placements)`. What is `placements` before you query the DOM? — chazsolo, Jun 26 '17 at 15:17
Looks good, you just forgot to use `data`. `$("header").append(data.placements. .... )` — Jeremy Thille, Jun 26 '17 at 15:17
Your JSON data is in the variable `data` within the `success` callback. But without seeing your HTML it's hard to say what you should do with it. — Karl Reid, Jun 26 '17 at 15:18
Possible duplicate of [Safely turning a JSON string into an object](https://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object) — Liam, Jun 26 '17 at 15:22
side note : setting "async: false", is bad practice for ajax calls — Karthik Ganesan, Jun 26 '17 at 15:23
What purpose are those first two variables supposed to serve? — jeffdill2, Jun 26 '17 at 15:26
It's not just bad practice, never ever set `async false`. If your struggling with async in javascript please read [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). — Liam, Jun 26 '17 at 15:26
@KarthikGanesan & Liam - Thank you for the advise on async - this was recommended weirdly by mdn. - Liam what I mean is to display the object using jQuery - title made more sense than what I actually wrote! - There was no particular error it was more a question of what is best practice. Jeremy, thank you for the advice. — Kieran Smith, Jun 26 '17 at 15:49
@Liam - I am struggling to find answers to my questions on Stack Overflow, you seem to know the site quite well, my new question is this: I am now trying to add in the objects 'id' 'name' 'price', how would I do this, i've tried this: `$(".placements-items").append(data.placements[0].items.id);` - but no luck — Kieran Smith, Jun 26 '17 at 16:05
Hi @KieranSmith. If you have a new question then you should ask it using the [Ask Question](https://stackoverflow.com/questions/ask) button. — Liam, Jun 26 '17 at 16:07
@Liam was more asking on advice for searching as these seem like simple questions that i can't find answers too sorry for not making that clear — Kieran Smith, Jun 26 '17 at 16:17

score 1 · Accepted Answer · answered Jun 26 '17 at 15:19

1

You haven't included what the error is or the expected output, but here's two potential errors.

You aren't utilizing the data object returned from your AJAX request.
The value associated with the placements key on your JSON object is an array of objects. Therefore, to access the message key, you'll need to traverse the array.

This is likely what your code should look like:

 $("header").append(data.placements[0].message);

answered Jun 26 '17 at 15:19

jeffdill2

3,968
2
30
47

Great - you've solved my problem, wasnt really an error it was more I wasn't sure how the above was actually done in the correct way, won't let me mark your answer as solved... sorry – Kieran Smith Jun 26 '17 at 15:47
@KieranSmith I think you have to wait 15 minutes or something like that before accepting an answer. As to your question from above about `id`, `name`, and `price`, keep in mind that the value of the `items` key is also an _array_ of objects. Meaning you'll have to traverse the array – something like `data.placements[0].items[0].id`. – jeffdill2 Jun 26 '17 at 19:17

Djurdjen · Answer 2 · 2017-06-26T16:53:31.053

First off, you're missing the data object within your append function.
Second, you're missing the key notation of data.placements considering the fact that placements is an array. You can either use data.placements[0].message to get your preferred data, or, if placements will be extended with more objects in the future, map through your objects like this:

    data.placements.map(function(obj, index){
        if(index == 0){
            $("header").append(obj.message);
        }
    })

Not necessary if your array will always have a length of 1 of course

How do I map a variable to object

2 Answers2