chore: manual translations (#42811)
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
a3395269a0
commit
c4fd49e5b7
@ -16,28 +16,29 @@ Now you'll take a closer look at the returned data to better understand the JSON
|
||||
|
||||
Understanding the structure of the data that an API returns is important because it influences how you retrieve the values you need.
|
||||
|
||||
On the right, click the "Get Message" button to load the freeCodeCamp Cat Photo API JSON into the HTML.
|
||||
On the right, click the `Get Message` button to load the freeCodeCamp Cat Photo API JSON into the HTML.
|
||||
|
||||
The first and last character you see in the JSON data are square brackets `[ ]`. This means that the returned data is an array. The second character in the JSON data is a curly `{` bracket, which starts an object. Looking closely, you can see that there are three separate objects. The JSON data is an array of three objects, where each object contains information about a cat photo.
|
||||
|
||||
You learned earlier that objects contain "key-value pairs" that are separated by commas. In the Cat Photo example, the first object has `"id":0` where "id" is a key and 0 is its corresponding value. Similarly, there are keys for "imageLink", "altText", and "codeNames". Each cat photo object has these same keys, but with different values.
|
||||
You learned earlier that objects contain "key-value pairs" that are separated by commas. In the Cat Photo example, the first object has `"id":0` where `id` is a key and `0` is its corresponding value. Similarly, there are keys for `imageLink`, `altText`, and `codeNames`. Each cat photo object has these same keys, but with different values.
|
||||
|
||||
Another interesting "key-value pair" in the first object is `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Here "codeNames" is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.
|
||||
Another interesting "key-value pair" in the first object is `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Here `codeNames` is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.
|
||||
|
||||
Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the "altText" of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called `json`:
|
||||
Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the `altText` property of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called `json`:
|
||||
|
||||
```js
|
||||
console.log(json[0].altText);
|
||||
// Prints "A white cat wearing a green helmet shaped melon on its head."
|
||||
```
|
||||
|
||||
The console would display the string `A white cat wearing a green helmet shaped melon on its head.`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
For the cat with the "id" of 2, print to the console the second value in the `codeNames` array. You should use bracket and dot notation on the object (which is saved in the variable `json`) to access the value.
|
||||
For the cat with the `id` of 2, print to the console the second value in the `codeNames` array. You should use bracket and dot notation on the object (which is saved in the variable `json`) to access the value.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console.
|
||||
Your code should use bracket and dot notation to access the proper code name, and print `Loki` to the console.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -10,15 +10,17 @@ dashedName: change-text-with-click-events
|
||||
|
||||
When the click event happens, you can use JavaScript to update an HTML element.
|
||||
|
||||
For example, when a user clicks the "Get Message" button, it changes the text of the element with the class `message` to say "Here is the message".
|
||||
For example, when a user clicks the `Get Message` button, it changes the text of the element with the class `message` to say `Here is the message`.
|
||||
|
||||
This works by adding the following code within the click event:
|
||||
|
||||
`document.getElementsByClassName('message')[0].textContent="Here is the message";`
|
||||
```js
|
||||
document.getElementsByClassName('message')[0].textContent="Here is the message";
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add code inside the `onclick` event handler to change the text inside the `message` element to say "Here is the message".
|
||||
Add code inside the `onclick` event handler to change the text inside the `message` element to say `Here is the message`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -30,13 +30,13 @@ json.forEach(function(val) {
|
||||
});
|
||||
```
|
||||
|
||||
**Note:** For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to Cross-site scripting attacks.
|
||||
**Note:** For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to cross-site scripting attacks.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `forEach` method to loop over the JSON data and create the HTML elements to display it.
|
||||
|
||||
Here is some example JSON
|
||||
Here is some example JSON:
|
||||
|
||||
```json
|
||||
[
|
||||
@ -55,7 +55,7 @@ Here is some example JSON
|
||||
Your code should store the data in the `html` variable
|
||||
|
||||
```js
|
||||
assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g));
|
||||
assert(__helpers.removeWhiteSpace(code).match(/html(\+=|=html\+)/g))
|
||||
```
|
||||
|
||||
Your code should use a `forEach` method to loop over the JSON data from the API.
|
||||
|
||||
@ -52,7 +52,7 @@ Your code should use `position.coords.longitude` to display the user's longitudi
|
||||
assert(code.match(/position\.coords\.longitude/g));
|
||||
```
|
||||
|
||||
You should display the user's position within the `data` div element.
|
||||
You should display the user's position within the `div` element with `id="data"`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: get-json-with-the-javascript-fetch-method
|
||||
|
||||
# --description--
|
||||
|
||||
Another way to request external data is to use the JavaScript `fetch()` method. It is equivalent to XMLHttpRequest, but the syntax is considered easier to understand.
|
||||
Another way to request external data is to use the JavaScript `fetch()` method. It is equivalent to `XMLHttpRequest`, but the syntax is considered easier to understand.
|
||||
|
||||
Here is the code for making a GET request to `/json/cats.json`
|
||||
|
||||
@ -24,7 +24,7 @@ fetch('/json/cats.json')
|
||||
|
||||
Take a look at each piece of this code.
|
||||
|
||||
The first line is the one that makes the request. So, `fetch(URL)` makes a GET request to the URL specified. The method returns a Promise.
|
||||
The first line is the one that makes the request. So, `fetch(URL)` makes a `GET` request to the URL specified. The method returns a Promise.
|
||||
|
||||
After a Promise is returned, if the request was successful, the `then` method is executed, which takes the response and converts it to JSON format.
|
||||
|
||||
@ -34,11 +34,11 @@ Now, it selects the element that will receive the data by using `document.getEle
|
||||
|
||||
# --instructions--
|
||||
|
||||
Update the code to create and send a "GET" request to the freeCodeCamp Cat Photo API. But this time, using the `fetch` method instead of `XMLHttpRequest`.
|
||||
Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. But this time, using the `fetch` method instead of `XMLHttpRequest`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should make a GET request with `fetch`.
|
||||
Your code should make a `GET` request with `fetch`.
|
||||
|
||||
```js
|
||||
assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g));
|
||||
@ -57,15 +57,15 @@ assert(
|
||||
Your code should use `then` to handle the data converted to JSON by the other `then`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.then\s*\(\s*(data|\(\s*data\s*\))\s*=>\s*{[^}]*}\s*\)/g));
|
||||
assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g));
|
||||
```
|
||||
|
||||
Your code should get the element with id `message` and change its inner HTML to the string of JSON data.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/document\s*\.getElementById\s*\(\s*('|")message\1\s*\)\s*\.innerHTML\s*=\s*JSON\s*\.\s*stringify\s*\(\s*data\s*\)/g
|
||||
__helpers.removeWhiteSpace(code).match(
|
||||
/document\.getElementById\(('|")message\1\)\.innerHTML=JSON\.stringify\(?\w+\)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
@ -32,11 +32,11 @@ req.onload = function(){
|
||||
};
|
||||
```
|
||||
|
||||
Here's a review of what each piece is doing. The JavaScript `XMLHttpRequest` object has a number of properties and methods that are used to transfer data. First, an instance of the `XMLHttpRequest` object is created and saved in the `req` variable. Next, the `open` method initializes a request - this example is requesting data from an API, therefore is a "GET" request. The second argument for `open` is the URL of the API you are requesting data from. The third argument is a Boolean value where `true` makes it an asynchronous request. The `send` method sends the request. Finally, the `onload` event handler parses the returned data and applies the `JSON.stringify` method to convert the JavaScript object into a string. This string is then inserted as the message text.
|
||||
Here's a review of what each piece is doing. The JavaScript `XMLHttpRequest` object has a number of properties and methods that are used to transfer data. First, an instance of the `XMLHttpRequest` object is created and saved in the `req` variable. Next, the `open` method initializes a request - this example is requesting data from an API, therefore is a `GET` request. The second argument for `open` is the URL of the API you are requesting data from. The third argument is a Boolean value where `true` makes it an asynchronous request. The `send` method sends the request. Finally, the `onload` event handler parses the returned data and applies the `JSON.stringify` method to convert the JavaScript object into a string. This string is then inserted as the message text.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Update the code to create and send a "GET" request to the freeCodeCamp Cat Photo API. Then click the "Get Message" button. Your AJAX function will replace the "The message will go here" text with the raw JSON output from the API.
|
||||
Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. Then click the `Get Message` button. Your AJAX function will replace the `The message will go here` text with the raw JSON output from the API.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -46,7 +46,7 @@ Your code should create a new `XMLHttpRequest`.
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
Your code should use the `open` method to initialize a "GET" request to the freeCodeCamp Cat Photo API.
|
||||
Your code should use the `open` method to initialize a `GET` request to the freeCodeCamp Cat Photo API.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -26,11 +26,11 @@ const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
|
||||
xhr.send(body);
|
||||
```
|
||||
|
||||
You've seen several of these methods before. Here the `open` method initializes the request as a "POST" to the given URL of the external resource, and uses the `true` Boolean to make it asynchronous. The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header. Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of 4 means the operation is complete, and a `status` of 201 means it was a successful request. The document's HTML can be updated. Finally, the `send` method sends the request with the `body` value, which the `userName` key was given by the user in the `input` field.
|
||||
You've seen several of these methods before. Here the `open` method initializes the request as a `POST` to the given URL of the external resource, and uses the `true` Boolean to make it asynchronous. The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header. Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of `4` means the operation is complete, and a `status` of `201` means it was a successful request. The document's HTML can be updated. Finally, the `send` method sends the request with the `body` value, which the `userName` key was given by the user in the `input` field.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Update the code so it makes a "POST" request to the API endpoint. Then type your name in the input field and click "Send Message". Your AJAX function should replace "Reply from Server will be here." with data from the server. Format the response to display your name appended with " loves cats".
|
||||
Update the code so it makes a `POST` request to the API endpoint. Then type your name in the input field and click `Send Message`. Your AJAX function should replace `Reply from Server will be here.` with data from the server. Format the response to display your name appended with the text `loves cats`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -40,7 +40,7 @@ Your code should create a new `XMLHttpRequest`.
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
Your code should use the `open` method to initialize a "POST" request to the server.
|
||||
Your code should use the `open` method to initialize a `POST` request to the server.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
|
||||
@ -62,7 +62,7 @@ Your code should have an `onreadystatechange` event handler set to a function.
|
||||
assert(code.match(/\.onreadystatechange\s*?=/g));
|
||||
```
|
||||
|
||||
Your code should get the element with class `message` and change its `textContent` to "`userName` loves cats"
|
||||
Your code should get the element with class `message` and change its `textContent` to `userName loves cats`
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: pre-filter-json-to-get-the-data-you-need
|
||||
|
||||
If you don't want to render every cat photo you get from the freeCodeCamp Cat Photo API, you can pre-filter the JSON before looping through it.
|
||||
|
||||
Given that the JSON data is stored in an array, you can use the `filter` method to filter out the cat whose "id" key has a value of 1.
|
||||
Given that the JSON data is stored in an array, you can use the `filter` method to filter out the cat whose `id` key has a value of `1`.
|
||||
|
||||
Here's the code to do this:
|
||||
|
||||
@ -22,7 +22,7 @@ json = json.filter(function(val) {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add code to `filter` the json data to remove the cat with the "id" value of 1.
|
||||
Add code to `filter` the json data to remove the cat with the `id` value of `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -14,7 +14,9 @@ When you're looping through these objects, you can use this `imageLink` property
|
||||
|
||||
Here's the code that does this:
|
||||
|
||||
`html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";`
|
||||
```js
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -28,7 +30,7 @@ You should use the `imageLink` property to display the images.
|
||||
assert(code.match(/val\.imageLink/g));
|
||||
```
|
||||
|
||||
You should use the `altText` for the alt attribute values of the images.
|
||||
You should use the `altText` for the `alt` attribute values of the images.
|
||||
|
||||
```js
|
||||
assert(code.match(/val\.altText/g));
|
||||
|
||||
Reference in New Issue
Block a user